Javascript 如何使用Jquery将自动智能感知添加到文本框

我想将自动Intellisense（自动完成——过滤搜索结果）添加到文本框中，对应于我在该文本框中键入的单词，Intellisense从数据库表中获取。我怎样才能做到这一点？有人能帮忙吗

以下是我的jQuery代码：

$(document).ready(function() {       
    $('#city').autocomplete({
       source:'send.php'
    });
});

send.php文件如下所示：

$link=mysqli_connect("localhost","hari","123","hari");
    
$searchTerm = $_GET['query'];  //get search term
    

$query = $db->query("SELECT fname FROM user WHERE fname LIKE 
         '%".$searchTerm."%' ORDER BY fname ASC");  //get matched data from user table

while ($row = $query->fetch_assoc()) {
        $data[] = $row['fname'];
}
        
echo json_encode($data);//return json data

<div class="content col-sm-12">
   <form>
      <h1>Hello!!!</h1>
      <input type="text" id="city" name="city" size="20" class="city" 
             placeholder="Please Enter City or ZIP code"><br><br>    
   </form>
</div>

下面给出了相应的HTML代码：

$link=mysqli_connect("localhost","hari","123","hari");
    
$searchTerm = $_GET['query'];  //get search term
    

$query = $db->query("SELECT fname FROM user WHERE fname LIKE 
         '%".$searchTerm."%' ORDER BY fname ASC");  //get matched data from user table

while ($row = $query->fetch_assoc()) {
        $data[] = $row['fname'];
}
        
echo json_encode($data);//return json data

<div class="content col-sm-12">
   <form>
      <h1>Hello!!!</h1>
      <input type="text" id="city" name="city" size="20" class="city" 
             placeholder="Please Enter City or ZIP code"><br><br>    
   </form>
</div>

你好

试试这个：

$(document).ready(function() {

        $('#city').autocomplete({
            source: function( request, response ) {
                      $.ajax( {
                               url: "send.php",
                               dataType: "jsonp",
                               data: {
                                    query: request.term
                               },
                              success: function( data ) {
                                   response( data );
                              }
                      } );
                    },

        });
});

---

我给你一个建议，使用angular 1，你可以简单地编写代码，而不需要额外的UI库，并且具有更好的性能和无问题的解决方案

将以下父div添加到输入元素：

将您的输入更改为：

在您的

下添加以下代码：

{{text}

作为一项基本设置，您需要在

部分中提供：

最后，您将在资产目录或某处创建一个新文件，如资产目录中的“suggestions.js”，并在您的

标记之前添加此文件，如模板中的以下内容：

该文件将包含以下行：

var-app=angular.module（'myApp'，[]）；
app.controller（'suggestionsCtrl'，函数（$scope，$http）{
$scope.suggestions=[]；
$scope.query=''；
$scope.fetch=函数（）{
$http（{method:'POST'，url:'send.php'，params:{query:$scope.query}}）。
然后（功能（响应）{
$scope.status=response.status；
$scope.suggestions=response.data；
}，功能（回应）{
/*电话打错了，在这里做点什么*/
});
};
});您必须在html页面中包含以下脚本

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

进入

$searchTerm = $_GET['term'];