Ajax實現搜索聯想搜索關鍵詞提醒無刷新搜索

時間 2020-11-16

標籤 javascript php css html java mysql jquery web ajax sql 欄目 Ajax 简体版

原文原文鏈接

搜索聯想應用很是普遍，百度，谷歌，搜狗，淘寶，天貓，京東，以及不少網站都有，只須要打上幾個字，就有相關的搜索提示。javascript

實現方法

經過javascript監聽搜索框的內容，調用後端便可。
（1）javascript監聽搜索框的內容
（2）把搜索框的關鍵詞傳給後端進行搜索
（3）搜索到結果，遍歷到頁面php

演示

代碼

index.htmlcss

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></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;
        }
        
        /*輸入框底部黃色背景去除*/
        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>
    <div id="input-content">
       <h1>Ajax無刷新搜索</h1>
       <input id="inputView" type="text" name="keyword" placeholder="請輸入關鍵詞">
    <div>
</form>

<!-- 搜索結果 -->
<div id="result"></div>

<!-- 監聽輸入框 -->
<script type="text/javascript">
$("#inputView").bind("input propertychang",function(event){
    var keyword = $.trim(this.value);
    // ajax搜索
    $.ajax({
        type: "GET",
        url: "server.php?keyword="+keyword,
        success:function(data){
            if (keyword == '') {
                $("#result").html("<p>關鍵詞不得爲空</p>");
            } else if (data[0].code == 202) {
                $("#result").html("<p>暫無搜索結果</p>");
            } else {
                // 用empty()清空append()
                $("#result").empty();
                // 再循環遍歷列表
                for (var a in data){
                    var resname = data[a].resname;
                    $("#result").append("<p>"+resname+"</p>");
                }
            }
        },
        error : function() {
          console.log("服務器錯誤")
        }
    });
});
</script>
</body>
</html>

server.phphtml

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

// 建立鏈接
$conn = new mysqli("數據庫服務器", "數據庫帳號", "數據庫密碼","數據庫名");

// 得到關鍵詞
$keyword = trim($_GET["keyword"]);

// 過濾關鍵詞
if(empty($keyword)){
    $results_search = array(
        "code" => "201",
        "msg" => "關鍵詞不得爲空"
    );
}else{
    mysqli_query($conn, "SET NAMES UTF-8"); //utf8 設爲對應的編碼
    $sql_search = "SELECT * FROM 表名 WHERE 須要搜索的字段 LIKE '%$keyword%' ORDER BY ID DESC";
    $result_search = $conn->query($sql_search);
    
    if ($result_search->num_rows > 0) {
        // 結果集是一個數組
        $results_search = array();
        while($row_search = $result_search->fetch_assoc()) {
            // 把搜索結果集存進一個數組
            $results_search[] = $row_search;
        }
    } else {
        // 搜索無果
        $results_search[] = array(
            "code" => "202",
            "msg" => "暫無搜索結果"
        );
    }
    
    // 斷開數據庫鏈接
    $conn->close();
}
// 返回結果
echo json_encode($results_search,JSON_UNESCAPED_UNICODE);
?>