Ajax implementation of search association search keyword reminder no refresh search

Time:2021-4-12

Search Lenovo is widely used in Baidu, Google, Sogou, Taobao, tmall, Jingdong and many other websites. You only need to type a few words to get relevant search tips.

Ajax implementation of search association search keyword reminder no refresh search
Ajax implementation of search association search keyword reminder no refresh search

Implementation method

Monitor the content of the search box through JavaScript and call the back end.
(1) JavaScript listens to the contents of the search box
(2) Pass the keywords of the search box to the back end for search
(3) Search results, traverse to the page

demonstration

Ajax implementation of search association search keyword reminder no refresh search

code

index.html

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script></script>
    <style type="text/css">
        #input-content{
            width: 350px;
            height: 200px;
            margin:100px auto 20px;
        }

        #input-content input{
            width: 100%;
            height: 50px;
            text-indent: 15px;
            font-size: 18px;
            outline: none;
            border:2px solid #333;
            border-radius: 100px;
        }
        
        /*Yellow background removal at the bottom of input box*/
        input:-webkit-autofill, 
         textarea:-webkit-autofill, 
         select:-webkit-autofill { 
               -webkit-box-shadow: 0 0 0 1000px white inset; 
        }
         input[type=text]:focus, input[type=password]:focus, textarea:focus {
              -webkit-box-shadow: 0 0 0 1000px white inset; 
        }
    </style>
</head>
<body>

<! -- form -- >
<form>
    <div id="input-content">
       <h1>Ajax no refresh search</h1>
       < input id = inputview "type = text" name = keyword "placeholder = please input keyword" >
    <div>
</form>

<! -- search results -- >
<div id="result"></div>

<! -- monitor input box -- >
<script type="text/javascript">
$("#inputView").bind("input propertychang",function(event){
    var keyword = $.trim(this.value);
    //Ajax search
    $.ajax({
        type: "GET",
        url: "server.php?keyword="+keyword,
        success:function(data){
            if (keyword == '') {
                $("#result"). HTML ("< p > keyword cannot be empty < / P >");
            } else if (data[0].code == 202) {
                $("#result"). HTML ("< p > no search results yet < / P >");
            } else {
                //Empty append() with empty()
                $("#result").empty();
                //Recycle traversal list
                for (var a in data){
                    var resname = data[a].resname;
                    $("#result").append("<p>"+resname+"</p>");
                }
            }
        },
        error : function() {
          console.log (server error)
        }
    });
});
</script>
</body>
</html>

server.php

<?php
header("Content-type:application/json");

//Create a connection
$conn = new mysqli ("database server", "database account", "database password", "database name");

//Get keywords
$keyword = trim($_GET["keyword"]);

//Filter keywords
if(empty($keyword)){
    $results_search = array(
        "code" => "201",
        "MSG" = > "keyword cannot be empty"
    );
}else{
    mysqli_ Query ($Conn, "set names UTF-8"); // utf8 is set as the corresponding encoding
    $sql_ Search = select * from table name where the field to be searched is like '% $keyword%' order by ID desc ';
    $result_search = $conn->query($sql_search);
    
    if ($result_search->num_rows > 0) {
        //The result set is an array
        $results_search = array();
        while($row_search = $result_search->fetch_assoc()) {
            //Save the search result set into an array
            $results_search[] = $row_search;
        }
    } else {
        //The search was fruitless
        $results_search[] = array(
            "code" => "202",
            "MSG" = > "no search results"
        );
    }
    
    //Disconnect database
    $conn->close();
}
//Return results
echo json_encode($results_search,JSON_UNESCAPED_UNICODE);
?>

DEMO

http://www.likeyunba.com/demo…

Author:TANKING
Date:2020-11-14
Web:http://www.likeyun.cn/
WeChat:face6009

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]