{"id":754,"date":"2014-09-10T09:04:27","date_gmt":"2014-09-10T15:04:27","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=754"},"modified":"2016-04-26T17:04:31","modified_gmt":"2016-04-26T23:04:31","slug":"search-jquery-ui-ajax-autocomplete-php","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/jquery\/search-jquery-ui-ajax-autocomplete-php\/","title":{"rendered":"Search with Ajax and jQuery UI Autocomplete, PHP, MySQL and JSON"},"content":{"rendered":"
\"Autocomplete<\/a>
Autocomplete Example<\/figcaption><\/figure>\n

I have been creating posts with scripts to do small stuff, but on this post I would like to show\/teach you how to implement the jQuery UI Autocomplete Widget<\/a>. I have to remark that for the style of the application I am using Bootstrap, so the most important thing is the html code of the form and the Javascript code. This is the Part 1 of the tutorial.<\/p>\n

I would like to show you a diagram of the application flow so click it to enlarge.<\/p>\n

\"jQuery<\/a>
jQuery UI Autocomplete flow<\/figcaption><\/figure>\n

As you can see the application will load the information when the page loads, this is why the tutorial is Part 1, on further tutorial the information will not be loaded until the user type the information to search. Now, the code.<\/p>\n

<\/p>\n

THE HTML FORM<\/h3>\n

The next code will be the code to for the HTML form. So take notice that the most important part of this code is the Input and where the search information will be typed and the Input where the result of selection information will be place.<\/p>\n

<form class="form-horizontal" role="form" method="get">\r\n    <div class="form-group">\r\n        <label class="col-sm-2 control-label" for="name">Type the name to search<\/label>\r\n        <div class="input-group col-sm-9">\r\n            <input id="name" name="name" type="text" class="form-control" placeholder="Type the name to search. The information of this field is already loaded." \/>\r\n        <\/div>\r\n        <div class="input-group col-sm-9">\r\n            <br>\r\n            <input id="id" name="id" type="text" class="form-control" placeholder="The selected Id will be loaded here." \/>\r\n        <\/div>\r\n    <\/div>\r\n<\/form><\/pre>\n
THE AJAX CODE<\/h3>\n
This a Ajax code will be use when the page loads, so don\u2019t forget to wrap your jQuery code on the Document ready.<\/p>\n
$(document).ready(function(){\r\n\r\n    $.ajax({\r\n        url: "php\/search1.php",\r\n        dataType: "json",\r\n        success: function(response){\r\n            \/\/ The mapping code will be here\r\n\r\n            \/\/ The Autocomple code will be here\r\n        }\r\n    });\r\n\r\n});<\/pre>\n
This is the meaning of the jQuery Ajax parameters:<\/p>\n
\n