Autocomplete 自动完成多个关键字
我想要。使用多个关键字自动完成文本框。它来自数据库。如果我使用jQuery并在客户端执行操作,意味着。如果数据库的大小很大,就会导致一些问题。我需要知道这是如何在服务器端完成的,并得到正确的结果 我已经看过这个主题,但是操作是在客户端完成的。我需要直接从数据库中找到它Autocomplete 自动完成多个关键字,autocomplete,Autocomplete,我想要。使用多个关键字自动完成文本框。它来自数据库。如果我使用jQuery并在客户端执行操作,意味着。如果数据库的大小很大,就会导致一些问题。我需要知道这是如何在服务器端完成的,并得到正确的结果 我已经看过这个主题,但是操作是在客户端完成的。我需要直接从数据库中找到它 <html> <head> <title>Testing</title> <link href="css/jquery-ui-1.10.3.custo
<html>
<head>
<title>Testing</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.srchHilite { background: yellow; }
</style>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
NewAuto();
});
function NewAuto() {
var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
alert(availableTags); // alert = win the day,win the heart of,win the heart of someone
$("#tags").autocomplete({
source: function(requestObj, responseFunc) {
var matchArry = availableTags.slice(); // Copy the array
var srchTerms = $.trim(requestObj.term).split(/\s+/);
// For each search term, remove non-matches.
$.each(srchTerms, function(J, term) {
var regX = new RegExp(term, "i");
matchArry = $.map(matchArry, function(item) {
return regX.test(item) ? item : null;
});
});
// Return the match results.
responseFunc(matchArry);
},
open: function(event, ui) {
// This function provides no hooks to the results list, so we have to trust the selector, for now.
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
// Loop through the results list and highlight the terms.
resultsList.each(function() {
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
});
}
});
}
</script>
</head>
<body>
<div>
<label for="tags">
Multi-word search:
</label>
<input type="text" id="tags" />
</div>
</body>
</html>
测试
.srchHilite{背景:黄色;}
$(文档).ready(函数(){
NewAuto();
});
函数NewAuto(){
var availableTags=[“赢得一天”、“赢得某人的心”、“赢得某人的心”];
警惕(可用标记);//警惕=赢得一天,赢得某人的心,赢得某人的心
$(“#标记”).autocomplete({
来源:函数(requestObj、responseFunc){
var matchArry=availableTags.slice();//复制数组
var srchTerms=$.trim(requestObj.term).split(/\s+/);
//对于每个搜索词,删除不匹配项。
$.each(srchTerms,function(J,term){
var regX=新的RegExp(术语“i”);
matchArry=$.map(matchArry,函数(项){
返回注册表测试(项)?项:空;
});
});
//返回匹配结果。
responseFunc(matchArry);
},
打开:功能(事件、用户界面){
//这个函数不提供结果列表的挂钩,所以我们现在必须信任选择器。
var resultsList=$(“ul.ui-autocomplete>li.ui-menu-item>a”);
var srchTerm=$.trim($(“#标记”).val()).split(/\s+/).join(“|”);
//循环浏览结果列表并突出显示术语。
resultsList.each(函数(){
var jThis=$(本);
var regX=new RegExp(“(“+srchTerm+”)”,“ig”);
var oldTxt=jThis.text();
html(oldTxt.replace(regX,$1');
});
}
});
}
多词搜索:
查看选择2,它可能会对您有所帮助
Select2是基于jQuery的选择框替换。它支持
搜索、远程数据集和结果的无限滚动
在代码中,您提供了源代码作为数组。正如您在评论中提到的,问题是如何在jquery中获取源数据 为了让这一切顺利进行, 您需要执行以下操作
[1]: http://api.jqueryui.com/autocomplete/#option-source
$(function() {
$( "#option_val" ).autocomplete({
dataType: "json",
source: 'search.php',
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
$(函数(){
$(“#选项_val”)。自动完成({
数据类型:“json”,
来源:“search.php”,
最小长度:1,
选择:功能(事件、用户界面){
日志(ui.item?
“选定:”+ui.item.value+“aka”+ui.item.id:
“未选择任何内容,输入为”+this.value);
}
});
});
这是php代码,如果您使用不同的服务器端脚本语言,很抱歉
<?php
// Create connection
$con=mysqli_connect("localhost","wordpress","password","wordpress");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result=mysqli_query($con,"select * from wp_users");
while($row = mysqli_fetch_array($result))
{
$results[] = array('label' => $row['user_login']);
}
echo json_encode($results);
mysqli_close($con);
?>
您需要从数据库加载可用的标签吗?是的。我想在服务器端对其进行归档。谢谢您的回复。我的问题是。如果查询数据很大,如何对其进行过滤。如果返回完整数组,则表示客户端系统挂起。我的需要是在服务器端完成过滤。