什么叫自动填充，用过百度的应该都知道！当你输入关键词之后，会有一个下拉的候选列表，都是与你输入的内容相关的，这个就是自动填充的搜索建议。一般的搜索引擎或者站内搜索都会有这个功能。

今天分享下这个功能的实现，演示网址：http://www.mrhso.com/movie    演示图：

可以实现搜索提示，键盘移动选择，回车键确认搜索，可以设置每次访问后台的时间间隔，设置候选 列表的数据数量。

实现原理：通过一个叫Jquery Autocomplete 的jquery插件实现。

插件的js脚本如下：

jQuery.autocomplete = function(input, options) {//Create a link to selfvar me = this;//Create jQuery object for input elementvar $input = $(input).attr("autocomplete", "off");//Apply inputClass if necessaryif(options.inputClass) $input.addClass(options.inputClass);//Create resultsvar results = document.createElement("div");//Create jQuery object for resultsvar $results =$(results);$results.hide().addClass(options.resultsClass).css("position", "absolute");if( options.width > 0 ) $results.css("width", options.width);//Add to body element$("body").append(results);input.autocompleter=me;var timeout = null;var prev = "";var active = -1;var cache ={};var keyb = false;var hasFocus = false;var lastKeyPressCode = null;//flush cachefunctionflushCache(){cache={};cache.data={};cache.length= 0;};//flush cache
flushCache();//if there is a data array suppliedif( options.data != null){var sFirstChar = "", stMatchSets = {}, row =[];//no url was specified, we need to adjust the cache length to make sure it fits the local data storeif( typeof options.url != "string" ) options.cacheLength = 1;//loop through the array and create a lookup structurefor( var i=0; i < options.data.length; i++){//if row is a string, make an array otherwise just reference the arrayrow = ((typeof options.data[i] == "string") ?[options.data[i]] : options.data[i]);//if the length is zero, don't add to listif( row[0].length > 0){//get the first charactersFirstChar = row[0].substring(0, 1).toLowerCase();//if no lookup array for this character exists, look it up nowif( !stMatchSets[sFirstChar] ) stMatchSets[sFirstChar] =[];//if the match is a string
stMatchSets[sFirstChar].push(row);}}//add the data items to the cachefor( var k instMatchSets ){//increase the cache sizeoptions.cacheLength++;//add to the cache
addToCache(k, stMatchSets[k]);}}$input.keydown(function(e) {//track last key pressedlastKeyPressCode =e.keyCode;switch(e.keyCode) {case 38: //up
e.preventDefault();moveSelect(-1);break;case 40: //down
e.preventDefault();moveSelect(1);break;case 9:  //tabcase 13: //returnif( selectCurrent() ){//make sure to blur off the current field$input.get(0).blur();e.preventDefault();}break;default:active= -1;if(timeout) clearTimeout(timeout);timeout= setTimeout(function(){onChange();}, options.delay);break;}}).focus(function(){//track whether the field has focus, we shouldn't process any results if the field no longer has focushasFocus = true;}).blur(function() {//track whether the field has focushasFocus = false;hideResults();});hideResultsNow();functiononChange() {//ignore if the following keys are pressed: [del] [shift] [capslock]if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return$results.hide();var v =$input.val();if (v == prev) return;prev=v;if (v.length >=options.minChars) {$input.addClass(options.loadingClass);requestData(v);}else{$input.removeClass(options.loadingClass);$results.hide();}};functionmoveSelect(step) {var lis = $("li", results);if (!lis) return;active+=step;if (active < 0) {active= 0;}else if (active >=lis.size()) {active= lis.size() - 1;}lis.removeClass("ac_over");$(lis[active]).addClass("ac_over");//Weird behaviour in IE//if (lis[active] && lis[active].scrollIntoView) {//lis[active].scrollIntoView(false);//}
};functionselectCurrent() {var li = $("li.ac_over", results)[0];if (!li) {var $li = $("li", results);if(options.selectOnly) {if ($li.length == 1) li = $li[0];}else if(options.selectFirst) {li= $li[0];}}if(li) {selectItem(li);return true;}else{return false;}};functionselectItem(li) {if (!li) {li= document.createElement("li");li.extra=[];li.selectValue= "";}var v = $.trim(li.selectValue ?li.selectValue : li.innerHTML);input.lastSelected=v;prev=v;$results.html("");$input.val(v);hideResultsNow();if (options.onItemSelect) setTimeout(function() { options.onItemSelect(li) }, 1);};//selects a portion of the input stringfunctioncreateSelection(start, end){//get a reference to the input elementvar field = $input.get(0);if( field.createTextRange ){var selRange =field.createTextRange();selRange.collapse(true);selRange.moveStart("character", start);selRange.moveEnd("character", end);selRange.select();}else if( field.setSelectionRange ){field.setSelectionRange(start, end);}else{if( field.selectionStart ){field.selectionStart=start;field.selectionEnd=end;}}field.focus();};//fills in the input box w/the first match (assumed to be the best match)functionautoFill(sValue){//if the last user key pressed was backspace, don't autofillif( lastKeyPressCode != 8){//fill in the value (keep the case the user has typed)$input.val($input.val() +sValue.substring(prev.length));//select the portion of the value not typed by the user (so the next character will erase)
createSelection(prev.length, sValue.length);}};functionshowResults() {//get the position of the input field right now (in case the DOM is shifted)var pos =findPos(input);//either use the specified width, or autocalculate based on form elementvar iWidth = (options.width > 0) ?options.width : $input.width();//reposition
$results.css({width: parseInt(iWidth)+ "px",top: (pos.y+ input.offsetHeight) + "px",left: pos.x+ "px"}).show();};functionhideResults() {if(timeout) clearTimeout(timeout);timeout= setTimeout(hideResultsNow, 200);};functionhideResultsNow() {if(timeout) clearTimeout(timeout);$input.removeClass(options.loadingClass);if ($results.is(":visible")) {$results.hide();}if(options.mustMatch) {var v =$input.val();if (v !=input.lastSelected) {selectItem(null);}}};functionreceiveData(q, data) {if(data) {$input.removeClass(options.loadingClass);results.innerHTML= "";//if the field no longer has focus or if there are no matches, do not display the drop downif( !hasFocus || data.length == 0 ) returnhideResultsNow();if($.browser.msie) {//we put a styled iframe behind the calendar so HTML SELECT elements don't show through$results.append(document.createElement('iframe'));}results.appendChild(dataToDom(data));//autofill in the complete box w/the first match as long as the user hasn't entered in more dataif( options.autoFill && ($input.val().toLowerCase() == q.toLowerCase()) ) autoFill(data[0][0]);showResults();}else{hideResultsNow();}};functionparseData(data) {if (!data) return null;var parsed =[];var rows =data.split(options.lineSeparator);for (var i=0; i < rows.length; i++) {var row =$.trim(rows[i]);if(row) {parsed[parsed.length]=row.split(options.cellSeparator);}}returnparsed;};functiondataToDom(data) {var ul = document.createElement("ul");var num =data.length;//limited results to a max numberif( (options.maxItemsToShow > 0) && (options.maxItemsToShow < num) ) num =options.maxItemsToShow;for (var i=0; i < num; i++) {var row =data[i];if (!row) continue;var li = document.createElement("li");if(options.formatItem) {li.innerHTML=options.formatItem(row, i, num);li.selectValue= row[0];}else{li.innerHTML= row[0];li.selectValue= row[0];}var extra = null;if (row.length > 1) {extra=[];for (var j=1; j < row.length; j++) {extra[extra.length]=row[j];}}li.extra=extra;ul.appendChild(li);$(li).hover(function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },function() { $(this).removeClass("ac_over"); }).click(function(e) { e.preventDefault(); e.stopPropagation(); selectItem(this) });}returnul;};functionrequestData(q) {if (!options.matchCase) q =q.toLowerCase();var data = options.cacheLength ? loadFromCache(q) : null;//recieve the cached dataif(data) {receiveData(q, data);//if an AJAX url has been supplied, try loading the data now} else if( (typeof options.url == "string") && (options.url.length > 0) ){$.get(makeUrl(q),function(data) {data=parseData(data);addToCache(q, data);receiveData(q, data);});//if there's been no data found, remove the loading class} else{$input.removeClass(options.loadingClass);}};functionmakeUrl(q) {var url = options.url + "?q=" +encodeURI(q);for (var i inoptions.extraParams) {url+= "&" + i + "=" +encodeURI(options.extraParams[i]);}returnurl;};functionloadFromCache(q) {if (!q) return null;if (cache.data[q]) returncache.data[q];if(options.matchSubset) {for (var i = q.length - 1; i >= options.minChars; i--) {var qs = q.substr(0, i);var c =cache.data[qs];if(c) {var csub =[];for (var j = 0; j < c.length; j++) {var x =c[j];var x0 = x[0];if(matchSubset(x0, q)) {csub[csub.length]=x;}}returncsub;}}}return null;};functionmatchSubset(s, sub) {if (!options.matchCase) s =s.toLowerCase();var i =s.indexOf(sub);if (i == -1) return false;return i == 0 ||options.matchContains;};this.flushCache = function() {flushCache();};this.setExtraParams = function(p) {options.extraParams=p;};this.findValue = function(){var q =$input.val();if (!options.matchCase) q =q.toLowerCase();var data = options.cacheLength ? loadFromCache(q) : null;if(data) {findValueCallback(q, data);}else if( (typeof options.url == "string") && (options.url.length > 0) ){$.get(makeUrl(q),function(data) {data=parseData(data)addToCache(q, data);findValueCallback(q, data);});}else{//no matchesfindValueCallback(q, null);}}functionfindValueCallback(q, data){if(data) $input.removeClass(options.loadingClass);var num = (data) ? data.length : 0;var li = null;for (var i=0; i < num; i++) {var row =data[i];if( row[0].toLowerCase() ==q.toLowerCase() ){li= document.createElement("li");if(options.formatItem) {li.innerHTML=options.formatItem(row, i, num);li.selectValue= row[0];}else{li.innerHTML= row[0];li.selectValue= row[0];}var extra = null;if( row.length > 1){extra=[];for (var j=1; j < row.length; j++) {extra[extra.length]=row[j];}}li.extra=extra;}}if( options.onFindValue ) setTimeout(function() { options.onFindValue(li) }, 1);}functionaddToCache(q, data) {if (!data || !q || !options.cacheLength) return;if (!cache.length || cache.length >options.cacheLength) {flushCache();cache.length++;}else if (!cache[q]) {cache.length++;}cache.data[q]=data;};functionfindPos(obj) {var curleft = obj.offsetLeft || 0;var curtop = obj.offsetTop || 0;while (obj =obj.offsetParent) {curleft+=obj.offsetLeftcurtop+=obj.offsetTop}return{x:curleft,y:curtop};}
}jQuery.fn.autocomplete= function(url, options, data) {//Make sure options existsoptions = options ||{};//Set url as optionoptions.url =url;//set some bulk local dataoptions.data = ((typeof data == "object") && (data.constructor == Array)) ? data : null;//Set default values for required optionsoptions.inputClass = options.inputClass || "ac_input";options.resultsClass= options.resultsClass || "ac_results";options.lineSeparator= options.lineSeparator || "\n";options.cellSeparator= options.cellSeparator || "|";options.minChars= options.minChars || 1;options.delay= options.delay || 400;options.matchCase= options.matchCase || 0;options.matchSubset= options.matchSubset || 1;options.matchContains= options.matchContains || 0;options.cacheLength= options.cacheLength || 1;options.mustMatch= options.mustMatch || 0;options.extraParams= options.extraParams ||{};options.loadingClass= options.loadingClass || "ac_loading";options.selectFirst= options.selectFirst || false;options.selectOnly= options.selectOnly || false;options.maxItemsToShow= options.maxItemsToShow || -1;options.autoFill= options.autoFill || false;options.width= parseInt(options.width, 10) || 0;this.each(function() {var input = this;newjQuery.autocomplete(input, options);});//Don't break the chainreturn this;
}jQuery.fn.autocompleteArray= function(data, options) {return this.autocomplete(null, options, data);
}jQuery.fn.indexOf= function(e){for( var i=0; i<this.length; i++){if( this[i] == e ) returni;}return -1;
};

css样式如下：

.ac_results {padding: 0px;border: 1px solid WindowFrame;background-color: Window;overflow: hidden;}.ac_results ul{width: 100%;list-style-position: outside;list-style: none;padding: 0;margin: 0;}.ac_results iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;top:0;left:0;z-index:-1;filter:mask();width:3000px;height:3000px;}.ac_results li{margin: 0px;padding: 2px 5px;cursor: pointer;display: block;width: 100%;font: menu;font-size: 12px;overflow: hidden;}.ac_loading{background : Window url('./indicator.gif') right center no-repeat;}.ac_over{background-color: Highlight;color: HighlightText;}

使用示例演示：

AJax数据传输格式：Sparta|896 Spencer|897 Spencerville|898 Spring Valley|899 Springboro|900 Springfield|901下面演示了两种使用方法：通过ajax访问数据 和通过js数组获取数据！<script type="text/javascript">
functionfindValue(li) {if( li == null ) return alert("No match!");//if coming from an AJAX call, let's use the CityId as the valueif( !!li.extra ) var sValue = li.extra[0];//otherwise, let's just display the value in the text boxelse var sValue =li.selectValue;alert("The value you selected was: " +sValue);
}functionselectItem(li) {findValue(li);
}functionformatItem(row) {return row[0] + " (id: " + row[1] + ")";
}functionlookupAjax(){var oSuggest = $("#CityAjax")[0].autocompleter;oSuggest.findValue();return false;
}functionlookupLocal(){var oSuggest = $("#CityLocal")[0].autocompleter;oSuggest.findValue();return false;
}$(document).ready(function() {$("#CityAjax").autocomplete("autocomplete_ajax.cfm",{delay:10,minChars:2,matchSubset:1,matchContains:1,cacheLength:10,onItemSelect:selectItem,onFindValue:findValue,formatItem:formatItem,autoFill:true});$("#CityLocal").autocompleteArray(["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron","Albany", "Alexandria", "Alger", "Alledonia", "Alliance", "Alpha", "Alvada","Alvordton", "Amanda", "Amelia", "Amesville", "Amherst", "Amlin", "Amsden","Amsterdam", "Andover", "Anna", "Ansonia", "Antwerp", "Apple Creek", "Arcadia","Arcanum", "Archbold", "Arlington", "Ashland", "Ashley", "Ashtabula", "Ashville","Athens", "Attica", "Atwater", "Augusta", "Aurora", "Austinburg", "Ava", "Avon","Avon Lake", "Bainbridge", "Bakersville", "Baltic", "Baltimore", "Bannock","Barberton", "Barlow", "Barnesville", "Bartlett", "Barton", "Bascom", "Batavia","Bath", "Bay Village", "Beach City", "Beachwood", "Beallsville", "Beaver","Beaverdam", "Bedford", "Bellaire", "Bellbrook", "Belle Center", "Belle Valley","Bellefontaine", "Bellevue", "Bellville", "Belmont", "Belmore", "Beloit", "Belpre","Benton Ridge", "Bentonville", "Berea", "Bergholz", "Berkey", "Berlin","Berlin Center", "Berlin Heights", "Bethel", "Bethesda", "Bettsville", "Beverly","Bidwell", "Big Prairie", "Birmingham", "Blacklick", "Bladensburg", "Blaine","Blakeslee", "Blanchester", "Blissfield", "Bloomdale", "Bloomingburg","Bloomingdale", "Bloomville", "Blue Creek", "Blue Rock", "Bluffton","Bolivar", "Botkins", "Bourneville", "Bowerston", "Bowersville","Bowling Green", "Bradford", "Bradner", "Brady Lake", "Brecksville","Bremen", "Brewster", "Brice", "Bridgeport", "Brilliant", "Brinkhaven","Bristolville", "Broadview Heights", "Broadway", "Brookfield", "Brookpark","Brookville", "Brownsville", "Brunswick", "Bryan", "Buchtel", "Buckeye Lake","Buckland", "Bucyrus", "Buffalo", "Buford", "Burbank", "Burghill", "Burgoon","Burkettsville", "Burton", "Butler", "Byesville", "Cable", "Cadiz", "Cairo","Caldwell", "Caledonia", "Cambridge", "Camden", "Cameron", "Camp Dennison","Campbell", "Canal Fulton", "Canal Winchester", "Canfield", "Canton", "Carbon Hill","Carbondale", "Cardington", "Carey", "Carroll", "Carrollton", "Casstown","Castalia", "Catawba", "Cecil", "Cedarville", "Celina", "Centerburg","Chagrin Falls", "Chandlersville", "Chardon", "Charm", "Chatfield", "Chauncey","Cherry Fork", "Chesapeake", "Cheshire", "Chester", "Chesterhill", "Chesterland","Chesterville", "Chickasaw", "Chillicothe", "Chilo", "Chippewa Lake","Christiansburg", "Cincinnati", "Circleville", "Clarington", "Clarksburg","Clarksville", "Clay Center", "Clayton", "Cleveland", "Cleves", "Clifton","Clinton", "Cloverdale", "Clyde", "Coal Run", "Coalton", "Coldwater", "Colerain","College Corner", "Collins", "Collinsville", "Colton", "Columbia Station","Columbiana", "Columbus", "Columbus Grove", "Commercial Point", "Conesville","Conneaut", "Conover", "Continental", "Convoy", "Coolville", "Corning", "Cortland","Coshocton", "Covington", "Creola", "Crestline", "Creston", "Crooksville","Croton", "Crown City", "Cuba", "Cumberland", "Curtice", "Custar", "Cutler","Cuyahoga Falls", "Cygnet", "Cynthiana", "Dalton", "Damascus", "Danville","Dayton", "De Graff", "Decatur", "Deerfield", "Deersville", "Defiance","Delaware", "Dellroy", "Delphos", "Delta", "Dennison", "Derby", "Derwent","Deshler", "Dexter City", "Diamond", "Dillonvale", "Dola", "Donnelsville","Dorset", "Dover", "Doylestown", "Dresden", "Dublin", "Dunbridge", "Duncan Falls","Dundee", "Dunkirk", "Dupont", "East Claridon", "East Fultonham","East Liberty", "East Liverpool", "East Palestine", "East Rochester","East Sparta", "East Springfield", "Eastlake", "Eaton", "Edgerton", "Edison","Edon", "Eldorado", "Elgin", "Elkton", "Ellsworth", "Elmore", "Elyria","Empire", "Englewood", "Enon", "Etna", "Euclid", "Evansport", "Fairborn","Fairfield", "Fairpoint", "Fairview", "Farmdale", "Farmer", "Farmersville","Fayette", "Fayetteville", "Feesburg", "Felicity", "Findlay", "Flat Rock","Fleming", "Fletcher", "Flushing", "Forest", "Fort Jennings", "Fort Loramie","Fort Recovery", "Fostoria", "Fowler", "Frankfort", "Franklin","Franklin Furnace", "Frazeysburg", "Fredericksburg", "Fredericktown","Freeport", "Fremont", "Fresno", "Friendship", "Fulton", "Fultonham","Galena", "Galion", "Gallipolis", "Galloway", "Gambier", "Garrettsville","Gates Mills", "Geneva", "Genoa", "Georgetown", "Germantown", "Gettysburg","Gibsonburg", "Girard", "Glandorf", "Glencoe", "Glenford", "Glenmont","Glouster", "Gnadenhutten", "Gomer", "Goshen", "Grafton", "Grand Rapids","Grand River", "Granville", "Gratiot", "Gratis", "Graysville", "Graytown","Green", "Green Camp", "Green Springs", "Greenfield", "Greenford","Greentown", "Greenville", "Greenwich", "Grelton", "Grove City","Groveport", "Grover Hill", "Guysville", "Gypsum", "Hallsville","Hamden", "Hamersville", "Hamilton", "Hamler", "Hammondsville","Hannibal", "Hanoverton", "Harbor View", "Harlem Springs", "Harpster","Harrisburg", "Harrison", "Harrisville", "Harrod", "Hartford", "Hartville","Harveysburg", "Haskins", "Haverhill", "Haviland", "Haydenville", "Hayesville","Heath", "Hebron", "Helena", "Hicksville", "Higginsport", "Highland", "Hilliard","Hillsboro", "Hinckley", "Hiram", "Hockingport", "Holgate", "Holland","Hollansburg", "Holloway", "Holmesville", "Homer", "Homerville", "Homeworth","Hooven", "Hopedale", "Hopewell", "Houston", "Howard", "Hoytville", "Hubbard","Hudson", "Huntsburg", "Huntsville", "Huron", "Iberia", "Independence","Irondale", "Ironton", "Irwin", "Isle Saint George", "Jackson", "Jackson Center","Jacksontown", "Jacksonville", "Jacobsburg", "Jamestown", "Jasper","Jefferson", "Jeffersonville", "Jenera", "Jeromesville", "Jerry City","Jerusalem", "Jewell", "Jewett", "Johnstown", "Junction City", "Kalida","Kansas", "Keene", "Kelleys Island", "Kensington", "Kent", "Kenton","Kerr", "Kettlersville", "Kidron", "Kilbourne", "Killbuck", "Kimbolton","Kings Mills", "Kingston", "Kingsville", "Kinsman", "Kipling", "Kipton","Kirby", "Kirkersville", "Kitts Hill", "Kunkle", "La Rue", "Lacarne","Lafayette", "Lafferty", "Lagrange", "Laings", "Lake Milton", "Lakemore","Lakeside Marblehead", "Lakeview", "Lakeville", "Lakewood", "Lancaster","Langsville", "Lansing", "Latham", "Latty", "Laura", "Laurelville","Leavittsburg", "Lebanon", "Lees Creek", "Leesburg", "Leesville","Leetonia", "Leipsic", "Lemoyne", "Lewis Center", "Lewisburg","Lewistown", "Lewisville", "Liberty Center", "Lima", "Limaville","Lindsey", "Lisbon", "Litchfield", "Lithopolis", "Little Hocking","Lockbourne", "Lodi", "Logan", "London", "Londonderry","Long Bottom", "Lorain", "Lore City", "Loudonville", "Louisville","Loveland", "Lowell", "Lowellville", "Lower Salem", "Lucas","Lucasville", "Luckey", "Ludlow Falls", "Lynchburg", "Lynx","Lyons", "Macedonia", "Macksburg", "Madison", "Magnetic Springs","Magnolia", "Maineville", "Malaga", "Malinta", "Malta", "Malvern","Manchester", "Mansfield", "Mantua", "Maple Heights", "Maplewood","Marathon", "Marengo", "Maria Stein", "Marietta", "Marion","Mark Center", "Marshallville", "Martel", "Martin", "Martins Ferry","Martinsburg", "Martinsville", "Marysville", "Mason", "Massillon","Masury", "Maumee", "Maximo", "Maynard", "Mc Arthur", "Mc Clure","Mc Comb", "Mc Connelsville", "Mc Cutchenville", "Mc Dermott","Mc Donald", "Mc Guffey", "Mechanicsburg", "Mechanicstown","Medina", "Medway", "Melmore", "Melrose", "Mendon", "Mentor","Mesopotamia", "Metamora", "Miamisburg", "Miamitown", "Miamiville","Middle Bass", "Middle Point", "Middlebranch", "Middleburg","Middlefield", "Middleport", "Middletown", "Midland", "Midvale","Milan", "Milford", "Milford Center", "Millbury", "Milledgeville","Miller City", "Millersburg", "Millersport", "Millfield","Milton Center", "Mineral City", "Mineral Ridge", "Minerva","Minford", "Mingo", "Mingo Junction", "Minster", "Mogadore","Monclova", "Monroe", "Monroeville", "Montezuma", "Montpelier","Montville", "Morral", "Morristown", "Morrow", "Moscow","Mount Blanchard", "Mount Cory", "Mount Eaton", "Mount Gilead","Mount Hope", "Mount Liberty", "Mount Orab", "Mount Perry","Mount Pleasant", "Mount Saint Joseph", "Mount Sterling","Mount Vernon", "Mount Victory", "Mowrystown", "Moxahala","Munroe Falls", "Murray City", "Nankin", "Napoleon", "Nashport","Nashville", "Navarre", "Neapolis", "Neffs", "Negley","Nelsonville", "Nevada", "Neville", "New Albany", "New Athens","New Bavaria", "New Bloomington", "New Bremen", "New Carlisle","New Concord", "New Hampshire", "New Haven", "New Holland","New Knoxville", "New Lebanon", "New Lexington", "New London","New Madison", "New Marshfield", "New Matamoras", "New Middletown","New Paris", "New Philadelphia", "New Plymouth", "New Richmond","New Riegel", "New Rumley", "New Springfield", "New Straitsville","New Vienna", "New Washington", "New Waterford", "New Weston","Newark", "Newbury", "Newcomerstown", "Newport", "Newton Falls","Newtonsville", "Ney", "Niles", "North Baltimore", "North Bend","North Benton", "North Bloomfield", "North Fairfield","North Georgetown", "North Hampton", "North Jackson","North Kingsville", "North Lawrence", "North Lewisburg","North Lima", "North Olmsted", "North Ridgeville", "North Robinson","North Royalton", "North Star", "Northfield", "Northwood", "Norwalk","Norwich", "Nova", "Novelty", "Oak Harbor", "Oak Hill", "Oakwood","Oberlin", "Oceola", "Ohio City", "Okeana", "Okolona", "Old Fort","Old Washington", "Olmsted Falls", "Ontario", "Orangeville","Oregon", "Oregonia", "Orient", "Orrville", "Orwell", "Osgood","Ostrander", "Ottawa", "Ottoville", "Otway", "Overpeck","Owensville", "Oxford", "Painesville", "Palestine", "Pandora","Paris", "Parkman", "Pataskala", "Patriot", "Paulding", "Payne","Pedro", "Peebles", "Pemberton", "Pemberville", "Peninsula","Perry", "Perrysburg", "Perrysville", "Petersburg", "Pettisville","Phillipsburg", "Philo", "Pickerington", "Piedmont", "Pierpont","Piketon", "Piney Fork", "Pioneer", "Piqua", "Pitsburg","Plain City", "Plainfield", "Pleasant City", "Pleasant Hill","Pleasant Plain", "Pleasantville", "Plymouth", "Polk","Pomeroy", "Port Clinton", "Port Jefferson", "Port Washington","Port William", "Portage", "Portland", "Portsmouth", "Potsdam","Powell", "Powhatan Point", "Proctorville", "Prospect", "Put in Bay","Quaker City", "Quincy", "Racine", "Radnor", "Randolph", "Rarden","Ravenna", "Rawson", "Ray", "Rayland", "Raymond", "Reedsville","Reesville", "Reno", "Republic", "Reynoldsburg", "Richfield","Richmond", "Richmond Dale", "Richwood", "Ridgeville Corners","Ridgeway", "Rio Grande", "Ripley", "Risingsun", "Rittman","Robertsville", "Rock Camp", "Rock Creek", "Rockbridge", "Rockford","Rocky Ridge", "Rocky River", "Rogers", "Rome", "Rootstown", "Roseville","Rosewood", "Ross", "Rossburg", "Rossford", "Roundhead", "Rudolph","Rushsylvania", "Rushville", "Russells Point", "Russellville", "Russia","Rutland", "Sabina", "Saint Clairsville", "Saint Henry", "Saint Johns","Saint Louisville", "Saint Marys", "Saint Paris", "Salem", "Salesville","Salineville", "Sandusky", "Sandyville", "Sarahsville", "Sardinia","Sardis", "Savannah", "Scio", "Scioto Furnace", "Scott", "Scottown","Seaman", "Sebring", "Sedalia", "Senecaville", "Seven Mile", "Seville","Shade", "Shadyside", "Shandon", "Sharon Center", "Sharpsburg","Shauck", "Shawnee", "Sheffield Lake", "Shelby", "Sherrodsville","Sherwood", "Shiloh", "Short Creek", "Shreve", "Sidney", "Sinking Spring","Smithfield", "Smithville", "Solon", "Somerdale", "Somerset","Somerville", "South Bloomingville", "South Charleston", "South Lebanon","South Point", "South Salem", "South Solon", "South Vienna","South Webster", "Southington", "Sparta", "Spencer", "Spencerville","Spring Valley", "Springboro", "Springfield", "Stafford", "Sterling","Steubenville", "Stewart", "Stillwater", "Stockdale", "Stockport","Stone Creek", "Stony Ridge", "Stout", "Stoutsville", "Stow", "Strasburg","Stratton", "Streetsboro", "Strongsville", "Struthers", "Stryker","Sugar Grove", "Sugarcreek", "Sullivan", "Sulphur Springs", "Summerfield","Summit Station", "Summitville", "Sunbury", "Swanton", "Sycamore","Sycamore Valley", "Sylvania", "Syracuse", "Tallmadge", "Tarlton","Terrace Park", "The Plains", "Thompson", "Thornville", "Thurman","Thurston", "Tiffin", "Tiltonsville", "Tipp City", "Tippecanoe", "Tiro","Toledo", "Tontogany", "Torch", "Toronto", "Tremont City", "Trenton","Trimble", "Trinway", "Troy", "Tuppers Plains", "Tuscarawas", "Twinsburg","Uhrichsville", "Union City", "Union Furnace", "Unionport", "Uniontown","Unionville", "Unionville Center", "Uniopolis", "Upper Sandusky", "Urbana","Utica", "Valley City", "Van Buren", "Van Wert", "Vandalia", "Vanlue","Vaughnsville", "Venedocia", "Vermilion", "Verona", "Versailles","Vickery", "Vienna", "Vincent", "Vinton", "Wadsworth", "Wakefield","Wakeman", "Walbridge", "Waldo", "Walhonding", "Walnut Creek", "Wapakoneta","Warnock", "Warren", "Warsaw", "Washington Court House","Washingtonville", "Waterford", "Waterloo", "Watertown", "Waterville","Wauseon", "Waverly", "Wayland", "Wayne", "Waynesburg", "Waynesfield","Waynesville", "Wellington", "Wellston", "Wellsville", "West Alexandria","West Chester", "West Elkton", "West Farmington", "West Jefferson","West Lafayette", "West Liberty", "West Manchester", "West Mansfield","West Millgrove", "West Milton", "West Point", "West Portsmouth","West Rushville", "West Salem", "West Union", "West Unity", "Westerville","Westfield Center", "Westlake", "Weston", "Westville", "Wharton","Wheelersburg", "Whipple", "White Cottage", "Whitehouse", "Wickliffe","Wilberforce", "Wilkesville", "Willard", "Williamsburg", "Williamsfield","Williamsport", "Williamstown", "Williston", "Willoughby", "Willow Wood","Willshire", "Wilmington", "Wilmot", "Winchester", "Windham", "Windsor","Winesburg", "Wingett Run", "Winona", "Wolf Run", "Woodsfield","Woodstock", "Woodville", "Wooster", "Wren", "Xenia", "Yellow Springs","Yorkshire", "Yorkville", "Youngstown", "Zaleski", "Zanesfield", "Zanesville","Zoar"],{delay:10,minChars:1,matchSubset:1,onItemSelect:selectItem,onFindValue:findValue,autoFill:true,maxItemsToShow:10});
});</script>

 delay:10 表示每次请求演示 10毫秒

 maxItemsToShow:10 表示每次结果只显示 10条

 autoFill:true, 表示自动填充

 其他选项可以默认，也可以直接查看源代码进行设置！  如果觉得这个插件太过简单，可以在此基础上添加功能！