https://lnzwfw.gov.cn/images/autocomplete1.js

1/**
2A jQuery plugin for search hints
3
4Author: Lorenzo Cioni - https://github.com/lorecioni
5*/
6
7(function($) {
8	$.fn.autocomplete = function(params) {
9		
10		//Selections
11		var currentSelection = -1;
12		var currentProposals = [];
13		
14		//Default parameters
15		params = $.extend({
16			hints: [],
17		//	placeholder: 'Search',
18			width: 200,
19			height: 16,
20			showButton: true,
21			buttonText: '',
22			onSubmit: function(text){},
23			onBlur: function(){}
24		}, params);
25
26		//Build messagess
27		this.each(function() {
28			//Container
29			var searchContainer = $('<div></div>')
30				.addClass('autocomplete-container')
31				.css('height', params.height * 2);	
32				
33			//Text input		
34			var input = $('<input type="text" autocomplete="off" name="query">')
35				.attr('placeholder', params.placeholder)
36				.addClass('autocomplete-input')
37				.css({
38					'width' : params.width,
39					'height' : params.height
40				});
41			
42			if(params.showButton){
43				input.css('border-radius', '3px 0 0 3px');
44			}
45
46			//Proposals
47			var proposals = $('<div></div>')
48				.addClass('proposal-box')
49				.css('width', params.width + 18)
50				.css('top', input.height() + 20);
51			var proposalList = $('<ul></ul>')
52				.addClass('proposal-list');
53
54			proposals.append(proposalList);
55			
56			input.keydown(function(e) {
57				switch(e.which) {
58					case 38: // Up arrow
59					e.preventDefault();
60					$('ul.proposal-list li').removeClass('selected');
61					if((currentSelection - 1) >= 0){
62						currentSelection--;
63						$( "ul.proposal-list li:eq(" + currentSelection + ")" )
64							.addClass('selected');
65					} else {
66						currentSelection = -1;
67					}
68					break;
69					case 40: // Down arrow
70					e.preventDefault();
71					if((currentSelection + 1) < currentProposals.length){
72						$('ul.proposal-list li').removeClass('selected');
73						currentSelection++;
74						$( "ul.proposal-list li:eq(" + currentSelection + ")" )
75							.addClass('selected');
76					}
77					break;
78					case 13: // Enter
79						if(currentSelection > -1){
80							var text = $( "ul.proposal-list li:eq(" + currentSelection + ")" ).html();
81							input.val(text);
82						}
83						currentSelection = -1;
84						proposalList.empty();
85						params.onSubmit(input.val());
86						break;
87					case 27: // Esc button
88						currentSelection = -1;
89						proposalList.empty();
90						input.val('');
91						break;
92				}
93			});
94				
95			input.bind("keyup", function(e){
96				if(e.which != 13 && e.which != 27 
97						&& e.which != 38 && e.which != 40){				
98					currentProposals = [];
99					currentSelection = -1;
100					proposalList.empty();
101					if(input.val() != ''){
102						var word = "^" + input.val() + ".*";
103						proposalList.empty();
104						for(var test in params.hints){
105							if(params.hints[test].match(word)){
106								currentProposals.push(params.hints[test]);	
107								var element = $('<li></li>')
108									.html(params.hints[test])
109									.addClass('proposal')
110									.click(function(){
111										input.val($(this).html());
112										proposalList.empty();
113										params.onSubmit(input.val());
114									})
115									.mouseenter(function() {
116										$(this).addClass('selected');
117									})
118									.mouseleave(function() {
119										$(this).removeClass('selected');
120									});
121								proposalList.append(element);
122							}
123						}
124					}
125				}
126			});
127			
128			input.blur(function(e){
129				currentSelection = -1;
130				proposalList.empty();
131				params.onBlur();
132			});
133			
134			searchContainer.append(input);
135			searchContainer.append(proposals);		
136			
137			if(params.showButton){
138				//Search button
139				var button = $('<div></div>')
140					.addClass('autocomplete-button')
141					.html(params.buttonText)
142					.css({
143						'height': params.height + 2,
144						'line-height': params.height + 2 + 'px'
145					})
146					.click(function(){
147						proposalList.empty();
148						params.onSubmit(input.val());
149					});
150				searchContainer.append(button);	
151			}
152	
153			$(this).append(searchContainer);	
154			
155			if(params.showButton){
156				//Width fix
157				searchContainer.css('width', params.width + button.width() + 50);
158			}
159		});
160
161		return this;
162	};
163
164})(jQuery);