How to convert XMLHttpRequest into JQuery-UI-Autocomplete?

Question

I was using manual XMLHttpRequest to access PHP files and Database.
Like this:

if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        //xmlhttp.responseText
        //Porcess on Response Text
        }
}
xmlhttp.open("GET", "PHP_Code/MyAjax.php?page=page_id", true);
xmlhttp.send();

Now I want to use JQuery-UI-Autocomplete-Ajax.
This is JQuery-UI Autocomplete documentation:

$(function() {
    var availableTags = [
      "ActionScript",
      "C++",
      "ColdFusion",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

I want to pass url PHP_Code/MyAjax.php?page=page_id instead of availableTags variable.
Please give some proper way to send request and receive response in JQuery.

swatkins · Accepted Answer · 2015-07-25 18:31:36Z

The source property can take a url as well. Just

https://jqueryui.com/autocomplete/#remote

$( "#birds" ).autocomplete({
  source: "search.php",
  minLength: 2,
  select: function( event, ui ) {
    log( ui.item ?
      "Selected: " + ui.item.value + " aka " + ui.item.id :
      "Nothing selected, input was " + this.value );
  }
});

Your URL needs to respond in a specific way (from the docs at http://api.jqueryui.com/autocomplete/#option-source):

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

or you can make jQuery UI Autocomplete use your formatted data:

https://jqueryui.com/autocomplete/#custom-data

Collectives™ on Stack Overflow

How to convert XMLHttpRequest into JQuery-UI-Autocomplete?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related