我想将自动智能感知（自动完成 - 过滤搜索结果）添加到文本框，对应于我在该文本框中键入的单词，并从数据库表中获取智能感知。我怎样才能做到这一点？有人可以帮忙吗？
这是我的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
相应的HTML代码如下：
<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页面中包含以下脚本
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
并在你的HTML头部添加以下css
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
您犯的错误是传递名称为term的参数，并尝试在您的php文件中使用名称query进行读取。在send.php文件中更改行
$searchTerm = $_GET['query'];
成
$searchTerm = $_GET['term'];
试试这个：
$(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库，并且具有更好的性能和无问题的解决方案。
<input type="text" id="city" name="city" size="20" class="city" ng-model="query" ng-change="fetch()" placeholder="Please Enter City or ZIP code">
<input>下面添加以下代码：
<ul>
<li ng-repeat="text in suggestions">{{ text }}</li>
</ul><head>部分：<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</body>标记：<script src="assets/suggestions.js"></script>
该文件将包含以下行：
var app = angular.module('myApp', []);
app.controller('suggestionsCtrl', function($scope, $http) {
$scope.suggestions = [];
$scope.query = '';
$scope.fetch = function() {
$http({method: 'POST', url: 'send.php', params: { query: $scope.query } }).
then(function(response) {
$scope.status = response.status;
$scope.suggestions = response.data;
}, function(response) {
/* SOMETHING WENT WRONG WTIH THE CALL DO SOMETHING HERE */
});
};
});这里有一个非常简单的Angular 1设置/教程：
https://www.w3schools.com/angular/default.asp
这不是一个直接的答案，但请相信我一个更有效的答案。 Angular 1和更新的版本可以节省大量时间并带来性能。
而btw，autocomplete（）不是本机jQuery函数。另外我没有提到你也需要jQuery用于Angular，但我认为它已经添加到你的模板中了。