Implement AutoComplete with JQuery (Ajax)/php/mysql
As always, demo and source Zip package at the end of the article, slowly enjoy it!
I think it's necessary for me to write this tutorial because most of the applications I've seen about automatic completion just give you a source code package and then tell you how to use it, not how it works and why. Knowing this will allow you to further customize the plugin to your own needs (I've written a lot about other apps in my blog about this).
Okay, here we go.
JavaScript code:
Copy Code code as follows:
<script src= "Jquery-1.2.1.pack.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
function Lookup (inputstring) {
if (Inputstring.length = = 0) {
Hide the suggestion box.
$ (' #suggestions '). Hide ();
} else {
$.post ("rpc.php", {querystring: "" +inputstring+ "}, function (data) {
if (Data.length >0) {
$ (' #suggestions '). Show ();
$ (' #autoSuggestionsList '). HTML (data);
}
});
}
}//Lookup
function Fill (thisvalue) {
$ (' #inputString '). Val (Thisvalue);
$ (' #suggestions '). Hide ();
}
</script>
JS's explanation:
Well, from the code above, we need to connect to a file called rpc.php, which handles all the operations.
The lookup function uses the word that is obtained from the text input box and then passes it to the rpc.php using the Ajax method post in jquery.
If the input character ' inputstring ' is ' 0 ' (Zero, "Here is the search box is not entered any content), the suggestion box is hidden, which is also very human, you want to, if you do not enter anything in the search box, you do not expect to appear a suggestion box."
If there is content in the input box, we get the ' inputstring ' and pass it to the rpc.php page, and then the jquery $.post () function is used, as follows:
$.post (URL, [data], [callback])
The ' callback ' section can be associated with a function, which is more interesting, only when the data is loaded successfully will be executed (translate: This is a free translation, did not read the original:<).
If the returned data is not empty (that is, there is something to display), the Search prompt box is displayed and the returned data is used instead of the HTML code.
It's that simple!
Current 1/3 page
123 Next read the full text
