Use jquery (Ajax), PHP, and MySQL for Automatic completion

[Switch] Use jquery (Ajax)/PHP/MySQL to automatically complete the Function

Copyright Disclaimer: During reprinting, please use hyperlinks to indicate the original source and author information of the article and this statement
Http://monw3c.blogbus.com/logs/29329105.html

 

As usual, the demo and source code zip packages are at the end of the article!

I think it is necessary for me to write this tutorial, because most of the applications I have seen about Automatic completion only give you a program source code package and then tell you how to use it, instead of telling you how it works and why it does. Knowing this allows you to further customize this plug-in based on your needs (I wrote a lot about other applications in my blog ).

Okay. Let's start now.

JavaScript code

<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 Interpretation

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 obtained from the text input box and uses the Ajax POST method in jquery to send it to RPC. php.

If the input character 'inputstring' is '0' (zero), the suggestion box is hidden, which is also user-friendly, if you do not enter anything in the search box, you do not expect a prompt box.

If there is content in the input box, we get this 'inputstring' and pass it to the rpc. PHP page. Then jquery's $. Post () function is used, as shown below:

$. Post (URL, [data], [callback])

The 'callback' part can be associated with a function. This is interesting. It is executed only when data is loaded successfully: <).

If the returned data is not empty (that is, something needs to be displayed), the Search Prompt box is displayed and the returned data (data) is used to replace the HTML code.

That's easy!

PHP Background Program (rpc. php)

As you know, my PHP background programs are called RPC. PHP (RPC refers to a remote process call), but it does not use the function actually executed to name it, but it is also good.

// PhP5 implementation-uses mysqli.
$ Db = new mysqli ('localhost', 'root', ", 'autocomplete ');
If (! $ DB ){
// Show error if we cannot connect.
Echo 'error: cocould not connect to the database .';
} Else {
// Is there a posted query string?
If (isset ($ _ post ['querystring']) {
$ Querystring = $ _ post ['querystring'];
// Is the string length greater than 0?
If (strlen ($ querystring)> 0 ){
// Run the query: We use like '$ querystring %'
// The percentage sign is a wild-card, in my example of countries it works like this...
// $ Querystring = 'uni ';
// Returned data = 'United States, United Kindom ';

$ Query = $ db-> query ("select value from countries where value like '$ querystring %' limit 10 ");
If ($ query ){
// While there are results loop through them-fetching an object (I like PhP5 BTW !).
While ($ result = $ query-> fetch_object ()){
// Format the results, Im using <li> for the list, you can change it.
// The onclick function fills the textbox with the result.
Echo '<li onclick = "fill (''. $ result-> value. '');">'. $ result-> value. '</LI> ';
}
} Else {
Echo 'error: there was a problem with the query .';
}
} Else {
// Dont do anything.
} // There Is A querystring.
} Else {
Echo 'there shoshould be no direct access to this script! ';
}
}

?>

PHP code explanationSince I have added a lot of comments in the code, I will not detail them here. Generally, you need to receive the 'querystring' and then use the wildcard character to generate a query statement. This means that in this case, a query statement is generated every time you type a character. If you do this all the time, I am afraid MySQL will not be able to stand it. However, in order to simplify the process as much as possible, this approach should be no problem for a small application. You need to modify this PHP code slightly in your system. For example, you need to update '$ query' to your own database, and you need to see where to put the name of your database table. CSS styleI am using css3. My God, it is really useful, although there are functional limitations on Firefox or safari. <Style type = "text/CSS">

. Suggestionsbox {
Position: relative;
Left: 30px;
Margin: 10px 0px 0px 0px;
Width: 200px;
Background-color: #212427;
-Moz-border-radius: 7px;
-WebKit-border-radius: 7px;
Border: 2px solid #000;
Color: # FFF;
}

. Suggestionlist {
Margin: 0px;
Padding: 0px;
}

. Suggestionlist Li {
Margin: 0px 0px 3px 0px;
Padding: 3px;
Cursor: pointer;
}

. Suggestionlist Li: hover {
Background-color: #659cd8;
}
</Style>

CSS code is very standard and there is nothing to mention. Main file html <Div>

<Div>

Type your county (for the demo ):
<Input size = "30" id = "inputstring" onkeyup = "Lookup (this. Value);" type = "text"/>

</Div> <Div class = "suggestionsbox" id = "Suggestions" style = "display: none;">

<Div class = "suggestionlist" id = "autosuggestionslist">

</Div>

</Div>

</Div>

This is part of the HTML code of the main file. You need to add an input box and set the 'onkeyup' function to lookup (this. value ). In addition, I suggest you do not modify its ID, if you do not want to modify the above JavaScript code. I think you should want to see what the final effect looks like, OK.

 

And,

Finally, there is a useful link. I think you should have waited for a long time.

Demo: auto complete demo

Source ZIP: AutoComplete source zip

If you have any questions, leave a message here. I think I can help you.

Thank you for your support.

Jamie.