使用Jquery UI 高仿百度搜索下拉列表功能

時間 2019-12-13

原文原文鏈接

最近項目有個需求,在新添加商戶的時候,用戶輸入商戶名稱後,若是系統中有相似的商戶名稱,直接顯示出來,以下圖的效果：php

實現這個功能,直接使用了JQuery UI 插件css

目前我使用的實現版本是：html

網友能夠自行下載好js文件,css文件，放在你項目能夠訪問到位置就能夠了。jquery

引入這些文件以後，你就能夠複製使用下面的頁面來測試(注意引用文件的路徑)：ajax

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL高",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Per高l",
"PHP",
"Python",
"Ruby",
"Scala",
"Sche高"
];數據庫

$( "#tags1" ).autocomplete({
source: availableTags
});json

$("#tags2").autocomplete({
source: ["a", "b", "c"]
});數組

//頁面加載
$("#tags3").autocomplete({
source: DataSouce1()
});
//數據庫
$("#tags4").autocomplete({
source: function( request, response ) {
var name=$.ui.autocomplete.escapeRegex( request.term );
response( $.grep( DataSouce2(name), function( item ){
return item;
}) );
}
});異步

//利用ajax頁面加載就獲取到數據源
function DataSouce1()
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]="高"+i;
};
return mycars;
}async

//利用ajax根據輸入的到數據庫查找至關於
function DataSouce2(name)
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]=name+"_"+i;
};
console.log(mycars);
return mycars;
}

});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags1" />
<input id="tags2" />
<input id="tags3" />
<input id="tags4" />
</div>
</body>
</html>

本人使用了測試頁面中的 tag3 ,tag4 實現方法,其中的ajax 請求實現的是這樣子的:

//利用ajax根據輸入的到數據庫查找至關於
function DataSouce2(name)
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]=name+"_"+i;
};
console.log(mycars);
return mycars;
/*
var my = new Array();
$.ajax({
url:'supply.php?action=like&name='+name,
type:'get',
dataType:'json',
async:false,
success:function(data){
$.each(data,function(i,item){
my[i] = item.name;
});
}
});
return my;
*/
}