Using PHP+JS to implement automatic search prompts (example)

Using PHP+JS to implement automatic search prompts (example)_PHP tutorial

WBOY

Release： 2016-07-21 15:07:48

Original

894 people have browsed it

I feel the need to write this tutorial because most of the autocomplete applications I have seen just give you a program source code package and tell you how to use it, rather than telling you how it works and Why do this. Knowing this allows you to further customize this plug-in to your own needs.

Okay, let’s get started now.
JavaScript code:

Copy code The code is as follows:

JS explanation:

Well, as you can see from the above code, we need to connect to a file called rpc.php, which handles all operations.
The lookup function uses the word obtained from the text input box and then passes it to rpc.php using the Ajax method POST in jQuery. If the input character 'inputString' is '0' (Zero, translator's annotation: here refers to no input in the search box), the suggestion box will be hidden. This is also very user-friendly. If you want to search, Nothing is entered in the box, and you don't expect a suggestion box to appear. If there is content in the input box, we get the 'inputString' and pass it to the rpc.php page, and then jQuery's $.post() function is used, as follows:
$.post(url, [ data], [callback])The 'callback' part can be associated with a function. This is more interesting. It will only be executed when the data (data) is loaded successfully. (Annotation: This is a free translation, I did not understand the original text: <).If the returned data (data) is not empty (that is, there is something to display), then display the search prompt box and use the returned data (data) to replace the html code in it.
It’s that simple!

PHP background program (rpc.php):

As you know, my php background program is called rpc.php (RPC refers to remote procedure call), but it is not actually executed. It’s named after the function, but it’s not bad.

Copy code
The 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 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

for the list, you can change it.
                // The onClick function fills the textbox with the result.
                echo ‘

'.$result->value.‘

';
            }
        } else {
            echo ‘ERROR: There was a problem with the query.';
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo ‘There should be no direct access to this script!';
}
}
?>

PHP代码解释：
鉴于代码中我已经加了很多注释，在这里我就不再说的很详细了。
一般情况下，需要接收这个 ‘QueryString' 然后在其最后使用通配符产生一个查询语句。
这意味着在这种情况下，每次敲进去一个字符都需要产生一个查询语句，如果一直都这样做的话，恐怕MYSQL会受不了。但是为了尽量的简化这个过程，这种做法对一个规模较小的应用应该没什么问题。
这段php代码你需要在自己的系统中稍作修改，比如你需要更新‘$query'到你自己的数据库，需要看在哪里放你数据库表的列名等等。
CSS样式：
我使用的是CSS3，天哪，它真的很好用，虽然在Firefox 或者Safari浏览器上会有功能限制。

复制代码代码如下:

The CSS codes are very standard, there is nothing special to point out.
Main file HTML:
This is part of the html code of the main file. All you need to add is an input box and set the 'onkeyup' function to lookup( this.value). Also, I recommend you not to modify its ID if you don't want to modify the Javascript code above.
Screenshot:
I think you would like to see what the final effect looks like, OK.

Also,

The last is the useful link, I think you should have been looking forward to it for a long time.
Source file: Click to download