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

Solution 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".