Jquery autocomplete plug-in combined with ajax demo

First, introduce the file. In addition to the basic files of juqery and juqeryUI, you also need to introduce the following files
1 <! -- Autocomplete -->
2 <script src = "<% = request. getContextPath () %>/share/js/jqueryPlugin/autoComplete/jquery. ui. core. js"> </script>
3 <script src = "<% = request. getContextPath () %>/share/js/jqueryPlugin/autoComplete/jquery. ui. widget. js"> </script>
4 <script src = "<% = request. getContextPath () %>/share/js/jqueryPlugin/autoComplete/jquery. ui. position. js"> </script>
5 <script src = "<% = request. getContextPath () %>/share/js/jqueryPlugin/autoComplete/jquery. ui. autocomplete. js"> </script>
The following is how to use the. js file:
01 $ ("# tags"). autocomplete ({
02 source: function (request, response ){
03 $. ajax ({
04 url: "SQL/sqlgetWebsqlDataBaseInforAjax ",
05 dataType: "json ",
06 data :{
07 searchDbInforItem: request. term
08 },
09 success: function (data ){
10 response ($. map (data, function (item ){
11 return {
12 dbId: item. dbid,
13 jdbcUrl: item. jdbcUrl,
14 ip: item. ip,
15 port: item. port,
16 sch: item. sch,
17 username: item. username,
18 password: item. password,
19 value: item. labelview
20}
21 }));
22}
23 });
24 },
25 minLength: 1,
26 select: function (event, ui ){
27 $ ("# dbInforDdId"). val (ui. item. dbId );
28 $ ("# dbInforDdjdbcUrl"). val (ui. item. jdbcUrl );
29 $ ("# dbInforIp"). val (ui. item. ip );
30 $ ("# dbInforPort"). val (ui. item. port );
31 $ ("# dbInforSch"). val (ui. item. sch );
32 $ ("# dbInforUserName"). val (ui. item. username );
33 $ ("# dbInforPassword"). val (ui. item. password );
34}
35 });
This script adds the autocomplete plug-in to the tag input, obtains the fuzzy search words through request. term, calls ajax, returns a json string to response, and uses a map function. Then the select method is implemented, that is, the response item is written to each input through ui. item. Automatic Data filling.
There is a label and value parameter, lable is the value displayed in the drop-down box, value is the value automatically filled after selection, you can set either separately or only one, for example, I only set one value.
The effect is as follows:
 

 
Next, we will improve the script and add it to the cache so that you don't need to get it through ajax every time. The improved script is as follows:
 
 
01 // autocomplete plug-in
02 // Cache
03 var cache = {};
04 $ ("# tags"). autocomplete ({
05 source: function (request, response ){
06 var term = request. term;
07 if (term in cache ){
08 response ($. map (cache [term], function (item ){
09 return {
10 dbId: item. dbid,
11 jdbcUrl: item. jdbcUrl,
12 ip: item. ip,
13 port: item. port,
14 sch: item. sch,
15 username: item. username,
16 password: item. password,
17 value: item. labelview
18}
19 }));
20 return;
21}
22 $. ajax ({
23 url: "SQL/sqlgetWebsqlDataBaseInforAjax ",
24 dataType: "json ",
25 data :{
26 searchDbInforItem: request. term
27 },
28 success: function (data ){
29 cache [term] = data;
30 response ($. map (data, function (item ){
31 return {
32 dbId: item. dbid,
33 jdbcUrl: item. jdbcUrl,
34 ip: item. ip,
35 port: item. port,
36 sch: item. sch,
37 username: item. username,
38 password: item. password,
39 value: item. labelview
40}
41 }));
42}
43 });
44 },
45 minLength: 1,
46 select: function (event, ui ){
47 $ ("# dbInforDdId"). val (ui. item. dbId );
48 $ ("# dbInforDdjdbcUrl"). val (ui. item. jdbcUrl );
49 $ ("# dbInforIp"). val (ui. item. ip );
50 $ ("# dbInforPort"). val (ui. item. port );
51 $ ("# dbInforSch"). val (ui. item. sch );
52 $ ("# dbInforUserName"). val (ui. item. username );
53 $ ("# dbInforPassword"). val (ui. item. password );
54}
55 });
The results are the same, but ajax is no longer needed to obtain data from the cache for the second time.
To sum up, autocomplete is a plug-in of jqueryUI that can implement automatic filling. Its source supports json transmitted from string and ajax, and jsonp (not studied in depth ). You can improve the script and add cache to reduce ajax requests.

Author: Ji ziming