Using PHP+JS to implement search automatic hints (instances) _php Tutorial

I think it's necessary for me to write this tutorial, because most of the apps I've seen about auto-completion just give you a program source package and then tell you how to use it instead of telling you how it works and why. Knowing this will allow you to further customize the plugin to your needs.

OK, let's start now.
JavaScript code:
Copy CodeThe code is as follows:



JS's explanation:
Well, from the code above, we need to connect to a file called rpc.php, which handles all operations.
The lookup function uses the word from the text input box and then uses the Ajax method post in jquery to pass it to rpc.php.
If the input character ' inputstring ' is ' 0 ' (Zero, that is, it is not entered in the search box), the suggestion box is hidden, which is also very human, you think, if you do not enter anything in the search box, you do not expect to appear a suggestion prompt 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 interesting only when the data is loaded successfully (this is a free translation, not read the original:<).
If the returned data is not empty (that is, there is something to display), then a search prompt is displayed and the returned data is used instead of the HTML code.
It's so easy!
PHP Background Program (rpc.php):
As you know, my PHP daemon is called rpc.php (RPC refers to a remote procedure call) and is not named for the function it actually executes, but it's not bad.
Copy CodeThe code is as follows:
PHP5 implementation-uses mysqli.
$db = new mysqli (' localhost ', ' root ', ', ' autoComplete ');
if (! $db) {
Show Error if we cannot connect.
Echo ' error:could 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 was a wild-card, in my example of countries it works like this ...
$queryString = ' Uni ';
Returned data = ' states, Kindom ';
$query = $db->query ("Select value from countries WHERE the value like ' $queryString% ' LIMIT 10");
if ($query) {
While there is results loop through them-fetching an Object (I like PHP5 btw!).
while ($result = $query->fetch_object ()) {
Format the results, im using

For the list, you can change it.
The OnClick function fills the textbox with the result.
Echo '

'. $result->value. '

';
}
} else {
Echo ' Error:there is a problem with the query. ';
}
} else {
Dont do anything.
}//There is a queryString.
} else {
Echo ' There should is no direct access to this script! ';
}
}
?>

PHP Code Explanation:
Since I've added a lot of comments to the code, I'm not going to say it in detail here.
In general, you need to receive this ' QueryString ' and then generate a query statement at the end of its use with a wildcard character.
This means that in this case, every time a character is knocked in, a query statement needs to be generated, and if you do that, I'm afraid MySQL will be overwhelmed. But in order to simplify the process as much as possible, this approach should be no problem for a smaller application.
This PHP code you need to make changes in your own system, such as you need to update the ' $query ' to your own database, you need to see where to put your database table column name and so on.
CSS style:
I use CSS3, God, it really works, although there are limitations on Firefox or Safari browser.
Copy CodeThe code is as follows:


CSS code is very standard, there is no need to specifically point out.
main file HTML:
This is part of the main file HTML code, you need to add an input box, and the ' onkeyup ' function is set to lookup (This.value). In addition, I recommend that you do not modify its ID, if you do not want to modify the above JavaScript code.
:
I think you might want to see what the final effect looks like, OK.

And also

Finally there is a useful link, I think you should look forward to it for a long time.
source file : Click to download

http://www.bkjia.com/PHPjc/327517.html www.bkjia.com true http://www.bkjia.com/PHPjc/327517.html techarticle I think it is necessary for me to write this tutorial, because most of the applications I have seen about auto-completion are simply giving you a program source package and then telling you how to use it instead of suing ...

