asp.netmvc实现自动完成

首先我对自动完成做一个简单的介绍:我们在使用google查询关键字的时候 google会自动判断出我们可能需要到的关键字并列出来供大家选择
例如:我们输入asp的时候 google会给我们列出asp.net asp.net mvc等等.这样对于用户的帮助体验会更舒服..今天我们将会走入这个功能.

当然这里必须先说明我的测试环境:
操作系统:windows server 2008 r2
开发软件:visual studio 2010中文版+asp.net mvc 2.0中文版.
浏览器信息:IE8

开始我们的第一步:
      我们会用到1个js 1个css
jquery.autocomplete.css:代码如下

1. .ac_results { 
2. padding: 0px; 
3. border: 1px solid black; 
4. background-color: white; 
5. overflow: hidden; 
6. z-index: 99999; 
7. } 
8.  
9. .ac_results ul { 
10. width: 100%; 
11. list-style-position: outside; 
12. list-style: none; 
13. padding: 0; 
14. margin: 0; 
15. } 
16.  
17. .ac_results li { 
18. margin: 0px; 
19. padding: 2px 5px; 
20. cursor: default; 
21. display: block; 
22. /*  
23. if width will be 100% horizontal scrollbar will apear  
24. when scroll mode will be used 
25. */ 
26. /*width: 100%;*/ 
27. font: menu; 
28. font-size: 12px; 
29. /*  
30. it is very important, if line-height not setted or setted  
31. in relative units scroll will be broken in firefox 
32. */ 
33. line-height: 16px; 
34. overflow: hidden; 
35. } 
36.  
37. .ac_loading { 
38. background: white url('indicator.gif') right center no-repeat; 
39. } 
40.  
41. .ac_odd { 
42. background-color: #eee; 
43. } 
44.  
45. .ac_over { 
46. background-color: #0A246A; 
47. color: white; 
48. } 

jquery.autocomplete.js:代码:

1. /* 
2.  * jQuery Autocomplete plugin 1.1 
3.  * 
4.  * Copyright (c) 2009 J?rn Zaefferer 
5.  * 
6.  * Dual licensed under the MIT and GPL licenses: 
7.  *   http://www.opensource.org/licenses/mit-license.php 
8.  *   http://www.gnu.org/licenses/gpl.html 
9.  * 
10.  * Revision: $Id: jquery.autocomplete.js 15 2009-08-22 10:30:27Z joern.zaefferer $ 
11.  */ 
12.  
13. ;(function($) { 
14.      
15. $.fn.extend({ 
16.     autocomplete: function(urlOrData, options) { 
17.         var isUrl = typeof urlOrData == "string"; 
18.         options = $.extend({}, $.Autocompleter.defaults, { 
19.             url: isUrl ? urlOrData : null, 
20.             data: isUrl ? null : urlOrData, 
21.             delay: isUrl ? $.Autocompleter.defaults.delay : 10, 
22.             max: options && !options.scroll ? 10 : 150 
23.         }, options); 
24.          
25.         // if highlight is set to false, replace it with a do-nothing function 
26.         options.highlight = options.highlight || function(value) { return value; }; 
27.          
28.         // if the formatMatch option is not specified, then use formatItem for backwards compatibility 
29.         options.formatMatch = options.formatMatch || options.formatItem; 
30.          
31.         return this.each(function() { 
32.             new $.Autocompleter(this, options); 
33.         }); 
34.     }, 
35.     result: function(handler) { 
36.         return this.bind("result", handler); 
37.     }, 
38.     search: function(handler) { 
39.         return this.trigger("search", [handler]); 
40.     }, 
41.     flushCache: function() { 
42.         return this.trigger("flushCache"); 
43.     }, 
44.     setOptions: function(options){ 
45.         return this.trigger("setOptions", [options]); 
46.     }, 
47.     unautocomplete: function() { 
48.         return this.trigger("unautocomplete"); 
49.     } 
50. }); 
51.  
52. $.Autocompleter = function(input, options) { 
53.  
54.     var KEY = { 
55.         UP: 38, 
56.         DOWN: 40, 
57.         DEL: 46, 
58.         TAB: 9, 
59.         RETURN: 13, 
60.         ESC: 27, 
61.         COMMA: 188, 
62.         PAGEUP: 33, 
63.         PAGEDOWN: 34, 
64.         BACKSPACE: 8 
65.     }; 
66.  
67.     // Create contentnbsp;object for input element 
68.     var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass); 
69.  
70.     var timeout; 
71.     var previousValue = ""; 
72.     var cache = $.Autocompleter.Cache(options); 
73.     var hasFocus = 0; 
74.     var lastKeyPressCode; 
75.     var config = { 
76.         mouseDownOnSelect: false 
77.     }; 
78.     var select = $.Autocompleter.Select(options, input, selectCurrent, config); 
79.      
80.     var blockSubmit; 
81.      
82.     // prevent form submit in opera when selecting with return key 
83.     $.browser.opera && $(input.form).bind("submit.autocomplete", function() { 
84.         if (blockSubmit) { 
85.             blockSubmit = false; 
86.             return false; 
87.         } 
88.     }); 
89.      
90.     // only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all 
91.     $input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) { 
92.         // a keypress means the input has focus 
93.         // avoids issue where input had focus before the autocomplete was applied 
94.         hasFocus = 1; 
95.         // track last key pressed 
96.         lastKeyPressCode = event.keyCode; 
97.         switch(event.keyCode) { 
98.          
99.             case KEY.UP: 
100.                 event.preventDefault(); 
101.                 if ( select.visible() ) { 
102.                     select.prev(); 
103.                 } else { 
104.                     onChange(0, true); 
105.                 } 
106.                 break; 
107.                  
108.             case KEY.DOWN: 
109.                 event.preventDefault(); 
110.                 if ( select.visible() ) { 
111.                     select.next(); 
112.                 } else { 
113.                     onChange(0, true); 
114.                 } 
115.                 break; 
116.                  
117.             case KEY.PAGEUP: 
118.                 event.preventDefault(); 
119.                 if ( select.visible() ) { 
120.                     select.pageUp(); 
121.                 } else { 
122.                     onChange(0, true); 
123.                 } 
124.                 break; 
125.                  
126.             case KEY.PAGEDOWN: 
127.                 event.preventDefault(); 
128.                 if ( select.visible() ) { 
129.                     select.pageDown(); 
130.                 } else { 
131.                     onChange(0, true); 
132.                 } 
133.                 break; 
134.              
135.             // matches also semicolon 
136.             case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA: 
137.             case KEY.TAB: 
138.             case KEY.RETURN: 
139.                 if( selectCurrent() ) { 
140.                     // stop default to prevent a form submit, Opera needs special handling 
141.                     event.preventDefault(); 
142.                     blockSubmit = true; 
143.                     return false; 
144.                 } 
145.                 break; 
146.                  
147.             case KEY.ESC: 
148.                 select.hide(); 
149.                 break; 
150.                  
151.             default: 
152.                 clearTimeout(timeout); 
153.                 timeout = setTimeout(onChange, options.delay); 
154.                 break; 
155.         } 
156.     }).focus(function(){ 
157.         // track whether the field has focus, we shouldn't process any 
158.         // results if the field no longer has focus 
159.         hasFocus++; 
160.     }).blur(function() { 
161.         hasFocus = 0; 
162.         if (!config.mouseDownOnSelect) { 
163.             hideResults(); 
164.         } 
165.     }).click(function() { 
166.         // show select when clicking in a focused field 
167.         if ( hasFocus++ > 1 && !select.visible() ) { 
168.             onChange(0, true); 
169.         } 
170.     }).bind("search", function() { 
171.         // TODO why not just specifying both arguments? 
172.         var fn = (arguments.length > 1) ? arguments : null; 
173.         function findValueCallback(q, data) { 
174.             var result; 
175.             if( data && data.length ) { 
176.                 for (var i=0; i < data.length; i++) { 
177.                     if( data[i].result.toLowerCase() == q.toLowerCase() ) { 
178.                         result = data[i]; 
179.                         break; 
180.                     } 
181.                 } 
182.             } 
183.             if( typeof fn == "function" ) fn(result); 
184.             else $input.trigger("result", result && [result.data, result.value]); 
185.         } 
186.         $.each(trimWords($input.val()), function(i, value) { 
187.             request(value, findValueCallback, findValueCallback); 
188.         }); 
189.     }).bind("flushCache", function() { 
190.         cache.flush(); 
191.     }).bind("setOptions", function() { 
192.         $.extend(options, arguments); 
193.         // if we've updated the data, repopulate 
194.         if ( "data" in arguments ) 
195.             cache.populate(); 
196.     }).bind("unautocomplete", function() { 
197.         select.unbind(); 
198.         $input.unbind(); 
199.         $(input.form).unbind(".autocomplete"); 
200.     }); 
201.      
202.      
203.     function selectCurrent() { 
204.         var selected = select.selected(); 
205.         if( !selected ) 
206.             return false; 
207.          
208.         var v = selected.result; 
209.         previousValue = v; 
210.          
211.         if ( options.multiple ) { 
212.             var words = trimWords($input.val()); 
213.             if ( words.length > 1 ) { 
214.                 var seperator = options.multipleSeparator.length; 
215.                 var cursorAt = $(input).selection().start; 
216.                 var wordAt, progress = 0; 
217.                 $.each(words, function(i, word) { 
218.                     progress += word.length; 
219.                     if (cursorAt <= progress) { 
220.                         wordAt = i; 
221.                         return false; 
222.                     } 
223.                     progress += seperator; 
224.                 }); 
225.                 words[wordAt] = v; 
226.                 // TODO this should set the cursor to the right position, but it gets overriden somewhere 
227.                 //$.Autocompleter.Selection(input, progress + seperator, progress + seperator); 
228.                 v = words.join( options.multipleSeparator ); 
229.             } 
230.             v += options.multipleSeparator; 
231.         } 
232.          
233.         $input.val(v); 
234.         hideResultsNow(); 
235.         $input.trigger("result", [selected.data, selected.value]); 
236.         return true; 
237.     } 
238.      
239.     function onChange(crap, skipPrevCheck) { 
240.         if( lastKeyPressCode == KEY.DEL ) { 
241.             select.hide(); 
242.             return; 
243.         } 
244.          
245.         var currentValue = $input.val(); 
246.          
247.         if ( !skipPrevCheck && currentValue == previousValue ) 
248.             return; 
249.          
250.         previousValue = currentValue; 
251.          
252.         currentValue = lastWord(currentValue); 
253.         if ( currentValue.length >= options.minChars) { 
254.             $input.addClass(options.loadingClass); 
255.             if (!options.matchCase) 
256.                 currentValue = currentValue.toLowerCase(); 
257.             request(currentValue, receiveData, hideResultsNow); 
258.         } else { 
259.             stopLoading(); 
260.             select.hide(); 
261.         } 
262.     }; 
263.      
264.     function trimWords(value) { 
265.         if (!value) 
266.             return [""]; 
267.         if (!options.multiple) 
268.             return [$.trim(value)]; 
269.         return $.map(value.split(options.multipleSeparator), function(word) { 
270.             return $.trim(value).length ? $.trim(word) : null; 
271.         }); 
272.     } 
273.      
274.     function lastWord(value) { 
275.         if ( !options.multiple ) 
276.             return value; 
277.         var words = trimWords(value); 
278.         if (words.length == 1)  
279.             return words[0]; 
280.         var cursorAt = $(input).selection().start; 
281.         if (cursorAt == value.length) { 
282.             words = trimWords(value) 
283.         } else { 
284.             words = trimWords(value.replace(value.substring(cursorAt), "")); 
285.         } 
286.         return words[words.length - 1]; 
287.     } 
288.      
289.     // fills in the input box w/the first match (assumed to be the best match) 
290.     // q: the term entered 
291.     // sValue: the first matching result 
292.     function autoFill(q, sValue){ 
293.         // autofill in the complete box w/the first match as long as the user hasn't entered in more data 
294.         // if the last user key pressed was backspace, don't autofill 
295.         if( options.autoFill && (lastWord($input.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE ) { 
296.             // fill in the value (keep the case the user has typed) 
297.             $input.val($input.val() + sValue.substring(lastWord(previousValue).length)); 
298.             // select the portion of the value not typed by the user (so the next character will erase) 
299.             $(input).selection(previousValue.length, previousValue.length + sValue.length); 
300.         } 
301.     }; 
302.  
303.     function hideResults() { 
304.         clearTimeout(timeout); 
305.         timeout = setTimeout(hideResultsNow, 200); 
306.     }; 
307.  
308.     function hideResultsNow() { 
309.         var wasVisible = select.visible(); 
310.         select.hide(); 
311.         clearTimeout(timeout); 
312.         stopLoading(); 
313.         if (options.mustMatch) { 
314.             // call search and run callback 
315.             $input.search( 
316.                 function (result){ 
317.                     // if no value found, clear the input box 
318.                     if( !result ) { 
319.                         if (options.multiple) { 
320.                             var words = trimWords($input.val()).slice(0, -1); 
321.                             $input.val( words.join(options.multipleSeparator) + (words.length ? options.multipleSeparator : "") ); 
322.                         } 
323.                         else { 
324.                             $input.val( "" ); 
325.                             $input.trigger("result", null); 
326.                         } 
327.                     } 
328.                 } 
329.             ); 
330.         } 
331.     }; 
332.  
333.     function receiveData(q, data) { 
334.         if ( data && data.length && hasFocus ) { 
335.             stopLoading(); 
336.             select.display(data, q); 
337.             autoFill(q, data[0].value); 
338.             select.show(); 
339.         } else { 
340.             hideResultsNow(); 
341.         } 
342.     }; 
343.  
344.     function request(term, success, failure) { 
345.         if (!options.matchCase) 
346.             term = term.toLowerCase(); 
347.         var data = cache.load(term); 
348.         // recieve the cached data 
349.         if (data && data.length) { 
350.             success(term, data); 
351.         // if an AJAX url has been supplied, try loading the data now 
352.         } else if( (typeof options.url == "string") && (options.url.length > 0) ){ 
353.              
354.             var extraParams = { 
355.                 timestamp: +new Date() 
356.             }; 
357.             $.each(options.extraParams, function(key, param) { 
358.                 extraParams[key] = typeof param == "function" ? param() : param; 
359.             }); 
360.              
361.             $.ajax({ 
362.                 // try to leverage ajaxQueue plugin to abort previous requests 
363.                 mode: "abort", 
364.                 // limit abortion to this input 
365.                 port: "autocomplete" + input.name, 
366.                 dataType: options.dataType, 
367.                 url: options.url, 
368.                 data: $.extend({ 
369.                     q: lastWord(term), 
370.                     limit: options.max 
371.                 }, extraParams), 
372.                 success: function(data) { 
373.                     var parsed = options.parse && options.parse(data) || parse(data); 
374.                     cache.add(term, parsed); 
375.                     success(term, parsed); 
376.                 } 
377.             }); 
378.         } else { 
379.             // if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful match 
380.             select.emptyList(); 
381.             failure(term); 
382.         } 
383.     }; 
384.      
385.     function parse(data) { 
386.         var parsed = ; 
387.         var rows = data.split("\n"); 
388.         for (var i=0; i < rows.length; i++) { 
389.             var row = $.trim(rows[i]); 
390.             if (row) { 
391.                 row = row.split("|"); 
392.                 parsed[parsed.length] = { 
393.                     data: row, 
394.                     value: row[0], 
395.                     result: options.formatResult && options.formatResult(row, row[0]) || row[0] 
396.                 }; 
397.             } 
398.         } 
399.         return parsed; 
400.     }; 
401.  
402.     function stopLoading() { 
403.         $input.removeClass(options.loadingClass); 
404.     }; 
405.  
406. }; 
407.  
408. $.Autocompleter.defaults = { 
409.     inputClass: "ac_input", 
410.     resultsClass: "ac_results", 
411.     loadingClass: "ac_loading", 
412.     minChars: 1, 
413.     delay: 400, 
414.     matchCase: false, 
415.     matchSubset: true, 
416.     matchContains: false, 
417.     cacheLength: 10, 
418.     max: 100, 
419.     mustMatch: false, 
420.     extraParams: {}, 
421.     selectFirst: true, 
422.     formatItem: function(row) { return row[0]; }, 
423.     formatMatch: null, 
424.     autoFill: false, 
425.     width: 0, 
426.     multiple: false, 
427.     multipleSeparator: ", ", 
428.     highlight: function(value, term) { 
429.         return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); 
430.     }, 
431.     scroll: true, 
432.     scrollHeight: 180 
433. }; 
434.  
435. $.Autocompleter.Cache = function(options) { 
436.  
437.     var data = {}; 
438.     var length = 0; 
439.      
440.     function matchSubset(s, sub) { 
441.         if (!options.matchCase)  
442.             s = s.toLowerCase(); 
443.         var i = s.indexOf(sub); 
444.         if (options.matchContains == "word"){ 
445.             i = s.toLowerCase().search("\\b" + sub.toLowerCase()); 
446.         } 
447.         if (i == -1) return false; 
448.         return i == 0 || options.matchContains; 
449.     }; 
450.      
451.     function add(q, value) { 
452.         if (length > options.cacheLength){ 
453.             flush(); 
454.         } 
455.         if (!data[q]){  
456.             length++; 
457.         } 
458.         data[q] = value; 
459.     } 
460.      
461.     function populate(){ 
462.         if( !options.data ) return false; 
463.         // track the matches 
464.         var stMatchSets = {}, 
465.             nullData = 0; 
466.  
467.         // no url was specified, we need to adjust the cache length to make sure it fits the local data store 
468.         if( !options.url ) options.cacheLength = 1; 
469.          
470.         // track all options for minChars = 0 
471.         stMatchSets[""] = ; 
472.          
473.         // loop through the array and create a lookup structure 
474.         for ( var i = 0, ol = options.data.length; i < ol; i++ ) { 
475.             var rawValue = options.data[i]; 
476.             // if rawValue is a string, make an array otherwise just reference the array 
477.             rawValue = (typeof rawValue == "string") ? [rawValue] : rawValue; 
478.              
479.             var value = options.formatMatch(rawValue, i+1, options.data.length); 
480.             if ( value === false ) 
481.                 continue; 
482.                  
483.             var firstChar = value.charAt(0).toLowerCase(); 
484.             // if no lookup array for this character exists, look it up now 
485.             if( !stMatchSets[firstChar] )  
486.                 stMatchSets[firstChar] = ; 
487.  
488.             // if the match is a string 
489.             var row = { 
490.                 value: value, 
491.                 data: rawValue, 
492.                 result: options.formatResult && options.formatResult(rawValue) || value 
493.             }; 
494.              
495.             // push the current match into the set list 
496.             stMatchSets[firstChar].push(row); 
497.  
498.             // keep track of minChars zero items 
499.             if ( nullData++ < options.max ) { 
500.                 stMatchSets[""].push(row); 
501.             } 
502.         }; 
503.  
504.         // add the data items to the cache 
505.         $.each(stMatchSets, function(i, value) { 
506.             // increase the cache size 
507.             options.cacheLength++; 
508.             // add to the cache 
509.             add(i, value); 
510.         }); 
511.     } 
512.      
513.     // populate any existing data 
514.     setTimeout(populate, 25); 
515.      
516.     function flush(){ 
517.         data = {}; 
518.         length = 0; 
519.     } 
520.      
521.     return { 
522.         flush: flush, 
523.         add: add, 
524.         populate: populate, 
525.         load: function(q) { 
526.             if (!options.cacheLength || !length) 
527.                 return null; 
528.             /*  
529.              * if dealing w/local data and matchContains than we must make sure 
530.              * to loop through all the data collections looking for matches 
531.              */ 
532.             if( !options.url && options.matchContains ){ 
533.                 // track all matches 
534.                 var csub = ; 
535.                 // loop through all the data grids for matches 
536.                 for( var k in data ){ 
537.                     // don't search through the stMatchSets[""] (minChars: 0) cache 
538.                     // this prevents duplicates 
539.                     if( k.length > 0 ){ 
540.                         var c = data[k]; 
541.                         $.each(c, function(i, x) { 
542.                             // if we've got a match, add it to the array 
543.                             if (matchSubset(x.value, q)) { 
544.                                 csub.push(x); 
545.                             } 
546.                         }); 
547.                     } 
548.                 }                 
549.                 return csub; 
550.             } else  
551.             // if the exact item exists, use it 
552.             if (data[q]){ 
553.                 return data[q]; 
554.             } else 
555.             if (options.matchSubset) { 
556.                 for (var i = q.length - 1; i >= options.minChars; i--) { 
557.                     var c = data[q.substr(0, i)]; 
558.                     if (c) { 
559.                         var csub = ; 
560.                         $.each(c, function(i, x) { 
561.                             if (matchSubset(x.value, q)) { 
562.                                 csub[csub.length] = x; 
563.                             } 
564.                         }); 
565.                         return csub; 
566.                     } 
567.                 } 
568.             } 
569.             return null; 
570.         } 
571.     }; 
572. }; 
573.  
574. $.Autocompleter.Select = function (options, input, select, config) { 
575.     var CLASSES = { 
576.         ACTIVE: "ac_over" 
577.     }; 
578.      
579.     var listItems, 
580.         active = -1, 
581.         data, 
582.         term = "", 
583.         needsInit = true, 
584.         element, 
585.         list; 
586.      
587.     // Create results 
588.     function init() { 
589.         if (!needsInit) 
590.             return; 
591.         element = $("<div/>") 
592.         .hide() 
593.         .addClass(options.resultsClass) 
594.         .css("position", "absolute") 
595.         .appendTo(document.body); 
596.      
597.         list = $("<ul/>").appendTo(element).mouseover( function(event) { 
598.             if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') { 
599.                 active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event)); 
600.                 $(target(event)).addClass(CLASSES.ACTIVE);             
601.             } 
602.         }).click(function(event) { 
603.             $(target(event)).addClass(CLASSES.ACTIVE); 
604.             select(); 
605.             // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus 
606.             input.focus(); 
607.             return false; 
608.         }).mousedown(function() { 
609.             config.mouseDownOnSelect = true; 
610.         }).mouseup(function() { 
611.             config.mouseDownOnSelect = false; 
612.         }); 
613.          
614.         if( options.width > 0 ) 
615.             element.css("width", options.width); 
616.              
617.         needsInit = false; 
618.     }  
619.      
620.     function target(event) { 
621.         var element = event.target; 
622.         while(element && element.tagName != "LI") 
623.             element = element.parentNode; 
624.         // more fun with IE, sometimes event.target is empty, just ignore it then 
625.         if(!element) 
626.             return ; 
627.         return element; 
628.     } 
629.  
630.     function moveSelect(step) { 
631.         listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE); 
632.         movePosition(step); 
633.         var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE); 
634.         if(options.scroll) { 
635.             var offset = 0; 
636.             listItems.slice(0, active).each(function() { 
637.                 offset += this.offsetHeight; 
638.             }); 
639.             if((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) { 
640.                 list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight()); 
641.             } else if(offset < list.scrollTop()) { 
642.                 list.scrollTop(offset); 
643.             } 
644.         } 
645.     }; 
646.      
647.     function movePosition(step) { 
648.         active += step; 
649.         if (active < 0) { 
650.             active = listItems.size() - 1; 
651.         } else if (active >= listItems.size()) { 
652.             active = 0; 
653.         } 
654.     } 
655.      
656.     function limitNumberOfItems(available) { 
657.         return options.max && options.max < available 
658.             ? options.max 
659.             : available; 
660.     } 
661.      
662.     function fillList() { 
663.         list.empty(); 
664.         var max = limitNumberOfItems(data.length); 
665.         for (var i=0; i < max; i++) { 
666.             if (!data[i]) 
667.                 continue; 
668.             var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term); 
669.             if ( formatted === false ) 
670.                 continue; 
671.             var li = $("<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0]; 
672.             $.data(li, "ac_data", data[i]); 
673.         } 
674.         listItems = list.find("li"); 
675.         if ( options.selectFirst ) { 
676.             listItems.slice(0, 1).addClass(CLASSES.ACTIVE); 
677.             active = 0; 
678.         } 
679.         // apply bgiframe if available 
680.         if ( $.fn.bgiframe ) 
681.             list.bgiframe(); 
682.     } 
683.      
684.     return { 
685.         display: function(d, q) { 
686.             init(); 
687.             data = d; 
688.             term = q; 
689.             fillList(); 
690.         }, 
691.         next: function() { 
692.             moveSelect(1); 
693.         }, 
694.         prev: function() { 
695.             moveSelect(-1); 
696.         }, 
697.         pageUp: function() { 
698.             if (active != 0 && active - 8 < 0) { 
699.                 moveSelect( -active ); 
700.             } else { 
701.                 moveSelect(-8); 
702.             } 
703.         }, 
704.         pageDown: function() { 
705.             if (active != listItems.size() - 1 && active + 8 > listItems.size()) { 
706.                 moveSelect( listItems.size() - 1 - active ); 
707.             } else { 
708.                 moveSelect(8); 
709.             } 
710.         }, 
711.         hide: function() { 
712.             element && element.hide(); 
713.             listItems && listItems.removeClass(CLASSES.ACTIVE); 
714.             active = -1; 
715.         }, 
716.         visible : function() { 
717.             return element && element.is(":visible"); 
718.         }, 
719.         current: function() { 
720.             return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]); 
721.         }, 
722.         show: function() { 
723.             var offset = $(input).offset(); 
724.             element.css({ 
725.                 width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(), 
726.                 top: offset.top + input.offsetHeight, 
727.                 left: offset.left 
728.             }).show(); 
729.             if(options.scroll) { 
730.                 list.scrollTop(0); 
731.                 list.css({ 
732.                     maxHeight: options.scrollHeight, 
733.                     overflow: 'auto' 
734.                 }); 
735.                  
736.                 if($.browser.msie && typeof document.body.style.maxHeight === "undefined") { 
737.                     var listHeight = 0; 
738.                     listItems.each(function() { 
739.                         listHeight += this.offsetHeight; 
740.                     }); 
741.                     var scrollbarsVisible = listHeight > options.scrollHeight; 
742.                     list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight ); 
743.                     if (!scrollbarsVisible) { 
744.                         // IE doesn't recalculate width when scrollbar disappears 
745.                         listItems.width( list.width() - parseInt(listItems.css("padding-left")) - parseInt(listItems.css("padding-right")) ); 
746.                     } 
747.                 } 
748.                  
749.             } 
750.         }, 
751.         selected: function() { 
752.             var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE); 
753.             return selected && selected.length && $.data(selected[0], "ac_data"); 
754.         }, 
755.         emptyList: function (){ 
756.             list && list.empty(); 
757.         }, 
758.         unbind: function() { 
759.             element && element.remove(); 
760.         } 
761.     }; 
762. }; 
763.  
764. $.fn.selection = function(start, end) { 
765.     if (start !== undefined) { 
766.         return this.each(function() { 
767.             if( this.createTextRange ){ 
768.                 var selRange = this.createTextRange(); 
769.                 if (end === undefined || start == end) { 
770.                     selRange.move("character", start); 
771.                     selRange.select(); 
772.                 } else { 
773.                     selRange.collapse(true); 
774.                     selRange.moveStart("character", start); 
775.                     selRange.moveEnd("character", end); 
776.                     selRange.select(); 
777.                 } 
778.             } else if( this.setSelectionRange ){ 
779.                 this.setSelectionRange(start, end); 
780.             } else if( this.selectionStart ){ 
781.                 this.selectionStart = start; 
782.                 this.selectionEnd = end; 
783.             } 
784.         }); 
785.     } 
786.     var field = this[0]; 
787.     if ( field.createTextRange ) { 
788.         var range = document.selection.createRange(), 
789.             orig = field.value, 
790.             teststring = "<->", 
791.             textLength = range.text.length; 
792.         range.text = teststring; 
793.         var caretAt = field.value.indexOf(teststring); 
794.         field.value = orig; 
795.         this.selection(caretAt, caretAt + textLength); 
796.         return { 
797.             start: caretAt, 
798.             end: caretAt + textLength 
799.         } 
800.     } else if( field.selectionStart !== undefined ){ 
801.         return { 
802.             start: field.selectionStart, 
803.             end: field.selectionEnd 
804.         } 
805.     } 
806. }; 
807.  
808. })(jQuery); 

需要说明的是:我们这里会引如jquery的包.
    <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js"></script>
开始我们的第二步:
建立默认的工程.详细步骤省略.来到我们的HomeController

1. public ActionResult Find(string q)   
2.         {   
3.             if (q == null) q = ""; 
4.             var a = from b in db.Orders 
5.                     where b.CustomerID.IndexOf(q)>-1 
6.                     select (b.CustomerID); 
7.             if (a.Count()==0) 
8.             { 
9.                 a = from b in db.Orders 
10.                     where b.CustomerID.Contains(q) 
11.                     select (b.CustomerID); 
12.             } 
13.             return Content(String.Join("\r\n",a.Take(10)));   
14.         } 

我们添加这个Controller 这里我们用于实现查询
var a = from b in db.Orders where b.CustomerID.IndexOf(q)>-1 select (b.CustomerID);IndexOf(q)>-1我们通过变量q来查询首个string等于q(当然 这里可以是数字 中文 字符 等等).
我们通过a的返回数量来判断是否首个字母包含q的数据 如果未发现 我们则会通过Contains来模糊查询数据任何地方涵有q的数据最后 我们把数据传递回去
 最后我们来个view的代码 这里就非常简单了

1. <div>   
2.     <%= Html.TextBox("city")%>   
3.   </div>   
4. <script type="text/javascript">   
5.     $(function() {  
6.     $("#city").autocomplete('<%= Url.Action("Find", "Home") %>');   
7.     });   
8. </script> 

当然 我这里的view是指index.
很简单.我们就这样完成了这个自动完成的功能