Home > Developer > Web Develop
Recently there is a need for the project, in the newly added merchant, when the user entered the merchant name, if the system has a similar merchant name, directly displayed, such as the effect:
Implement this function by using the jquery UI plugin directly
The implementation version I'm currently using is:
Users can download their own JS files, CSS files, put in your project can be accessed to the location on it.
Once these files are introduced, you can copy them using the following page to test ( note the path to the referenced file ):
<!doctype html>
<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 High",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Per High L",
"PHP",
"Python",
"Ruby",
"Scala",
"Sche High"
];
$ ("#tags1"). AutoComplete ({
Source:availabletags
});
$ ("#tags2"). AutoComplete ({
Source: ["A", "B", "C"]
});
Page load
$ ("#tags3"). AutoComplete ({
Source:datasouce1 ()
});
Database
$ ("#tags4"). AutoComplete ({
Source:function (Request, Response) {
var Name=$.ui.autocomplete.escaperegex (request.term);
Response ($.grep (DATASOUCE2 (name), function (item) {
return item;
}) );
}
});
Get to the data source using the AJAX page load
function DataSouce1 ()
{
var mycars=new Array ()
for (var i = 0; I <100; i++) {
Mycars[i]= "Gao" +i;
};
return mycars;
}
Using AJAX to find the equivalent of the input to the database
function DataSouce2 (name)
{
var mycars=new Array ()
for (var i = 0; I <100; i++) {
Mycars[i]=name+ "_" +i;
};
Console.log (Mycars);
return mycars;
}
});
</script>
<body>
<div class= "Ui-widget" >
<label for= "tags" >tags: </label>
<input id= "TAGS1"/>
<input id= "Tags2"/>
<input id= "Tags3"/>
<input id= "TAGS4"/>
</div>
</body>
I used the TAG3 in the test page, the Tag4 implementation method, where the AJAX request is implemented like this:
Using AJAX to find the equivalent of the input to the database
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;
*/
}
The comment section is that I specifically implemented the AJAX request, processing JSON data, return a one-dimensional array (this process, I realized a bit depressed, because Ajax is not often used, some settings are not clear, online search for a long time to get it done!) to return data after processing the data in success To set it asynchronously as synchronous, is to set Async:false)
This way you can achieve the desired effect!
Use the jquery UI high imitation Baidu search drop-down list feature
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
