How to use Ajax and the HTML structure to echo autocomplete options?

问题

I want to create an autofill search box. it gets a JSON and sends them to an HTML5 <datalist> of <option>s.

It works fine but it cant use spaces in values! so it just returns the first word. for example, if the jresults.name is "lets go" - I get only "lets".

What is the best way doing this?

This part: $( "#prod_name_list" ).children().remove(); prevents me of choosing an option from the list. because it deletes everything in it when I "keyup" so I need a different solution for this.
The second part is after submitting the form I want to get the id chosen of the object. (jresults.id) and I'm not sure how to retrieve it with the submit.

MY CODE:

JS part:

        $("#prod_name").bind("keyup", function(e) {

            if (e.which <= 90 && e.which >= 48){

                $( "#prod_name_list" ).children().remove();
                var prod_name = $("#prod_name").val();

                $.ajax({
                    method: "POST",
                    url: "<?php echo site_url('kas/search_prod_name'); ?>",
                    data: ({ "prod_name": prod_name }),
                    success: function (result){

                        var jresults = JSON.parse(result);
                        console.log("jresults: "+jresults);

                        var lng = jresults.length;
                        console.log("lng: "+lng);

                        for (var i=0; i<lng; i++) {
                            if (jresults.hasOwnProperty(i)) {
                                  console.log("name: "+jresults[i].name);
                                  $("#prod_name_list").append("<option name=\"prod_id\" id="+jresults[i].id+">"+jresults[i].name+"</option>");
                            }
                        }

                    }
                });

            }

        });

HTML part(using codeigniter syntaxes for the form:

<?php 
    $attributes = array('class' => 'prod_name', 'id' => 'prod_name', 'name' => 'prod_name', 'list' => 'prod_name_list');


        echo form_input('prod_name',  'prod Name', $attributes);    
    ?>

    <datalist id="prod_name_list"> 


    </datalist>

回答1:

A few things to work on here, but let's jump into a working example: https://jsfiddle.net/Twisty/a2z7e1yb/

The HTML I tested with:

Name: <input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" />
<datalist id="prod_name_list">

</datalist>

The JQuery I would advise using:

$(document).ready(function() {
  $("#prod_name").keyup(function() {
    $.ajax({
      method: "POST",
      url: "<?php echo site_url('kas/search_prod_name'); ?>",
      data: {
        "prod_name": $("#prod_name").val();
      },
      success: function(result) {
        console.log(result);
        var options = "";
        $.each(result, function(k, v) {
          console.log("name: " + v.name);
          options += "<option value='" v.name + "'>\r\n";
        });
        console.log(options);
        $("#prod_name_list").html(options);
      }
    });
  });
});

As was mentioned, you can use onKeyPress versus onKeyUp. I leave that up to you.

I did testing with test data that looked like:

[
  {
    "name": "Lets Go"
  }, {
    "name": "Go More"
  }
]

The $.each() works well for this. It will iterate over each array item and place it's Key into k and each object into v. We then generate a string of all the options and replace whatever is inside our datalist So if the result set is 15 options on the first character, it would be replaced ion the next keystroke with whatever result set we get.

Using .remove() and .append(), in my mind, becomes cumbersome for this type of application. You want to remove all the options, or replace them, with whatever new data you receive. In my working example, when a key is pressed, we see:

<datalist id="prod_name_list">
  <option value="0">Lets Go</option>
  <option value="1">Go More</option>
</datalist>

I hope this is clear and helps you out. If it's not, leave a comment and let me know.

Update

I think you may be using the <datalist> tag incorrectly. It should be fully populated when the page loads, not after text is entered. See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

It should be used like so: https://jsfiddle.net/Twisty/a2z7e1yb/2/

<label>Name:
<input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" /></label>
<datalist id="prod_name_list">
  <option value="Let's Go" />
  <option value="No Go" />
  <option value="Go Back to Bed" />
</datalist>

If you really want to make it like JQuery UI's Autocomplete, you would build a <ul> or <div> with the results as a list inside. This list would be populated when a key is pressed, showing just the relevant results. For example if "L" was pressed it would sen that value to your PHP which would show "Let's Go" and any other product Names that begin with "L". It's different than <datalist> which looks for anything in your List that contains "L".

来源：https://stackoverflow.com/questions/35338534/how-to-use-ajax-and-the-html-structure-to-echo-autocomplete-options

标签

javascript

jquery

ajax

html5

html-datalist