autocomplete

经常会使用到类似jquery的autocomplete插件，所以列一下，经常用到的代码：

 

var getrvar = Array();/** *添加自选股向导 */var addSelfStockWizard = function () {//autocomplete daimavar $autocomplete = $('<ul class="sousuo-jianpan" id="daima"></ul>').hide().insertAfter('#stocksearch'); var selectedItem = null;/** *设置选定的列表项 */ var setSelectedItem = function(item) {selectedItem = item;if (selectedItem === null) { $autocomplete.hide(); return;} if (selectedItem < 0) { selectedItem = 0; }if (selectedItem >= $autocomplete.find('li').length) { selectedItem = $autocomplete.find('li').get(0);}$autocomplete.find('li').removeClass('selected').eq(selectedItem).addClass('selected');$autocomplete.show(); }; var populateSearchField = function() { $('#stocksearch').val($autocomplete.find('li').eq(selectedItem).text()); setSelectedItem(null); }; $('#selfstocksubwiz').click(function(){ populateSearchField(); }); $('#stocksearch').attr('daima', 'off').keyup(function(event) { if ((event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32)) { // keycode 40 = Down, 8 = BackSpace BackSpace, 32 = space spaceKeys with codes 40 and below are special (enter, arrow keys, escape, etc.). if($('#stocksearch').val().length > 0 && $('#stocksearch').val().length < 8){ getrvar.length = 0; var code = $('#stocksearch').val(); $.ajax({ type : 'POST', url : '/tblog/stock/stockKey', data : 'code=' + code, dataType : 'json', success: function(json){ $autocomplete.empty(); $.each(json.result, function(index, term) { getrvar[index] = term; $('<li><span class="mar-left-ss"></span></li>').text(getrvar[index]).appendTo($autocomplete).mouseover(function() { setSelectedItem(index); }).click(populateSearchField);}); setSelectedItem(0);}}); } else { setSelectedItem(null); } } else if (event.keyCode == 38 && selectedItem !== null) { // User pressed up arrow. setSelectedItem(selectedItem - 1); event.preventDefault(); } else if (event.keyCode == 40 && selectedItem !== null) { // User pressed down arrow. setSelectedItem(selectedItem + 1); event.preventDefault(); } else if (event.keyCode == 27 && selectedItem !== null) { // User pressed escape key. setSelectedItem(null); }}).keypress(function(event) { if (event.keyCode == 13 && selectedItem !== null) { // User pressed enter key. populateSearchField(); return false; } }).blur(function(event) { setTimeout(function() { setSelectedItem(null); }, 250); });}; 

 

不过用户需要发送ajax请求到服务器端，

 

<?php/** * 获取键盘精灵数据 * @param string $code * @return array */public static function wizardStock($code){$tmp = array();$i= 0;$num= 0;$charset= 'utf-8';$hd= mb_substr($code, 0, 1, $charset);//这里是股票数据源$stock= self::getStockInfo();foreach ($stock as $v) {$k= (int)$v[2]; if (substr($v[2], 0, 1) == $hd) {if (mb_strpos($v[2], $code, 0, $charset) !== false || mb_strpos($v[0], $code, 0, $charset) !== false || mb_strpos($v[1], strtoupper($code), 0, $charset) !== false ) {$tmp[$k] = $v[2] . ' ' . $v[0];$num++;$i++;}}if ($i > 7) break;}if (empty($tmp) || count($tmp) < 7) {foreach ($stock as $v) {$k= (int)$v[2];if (mb_strpos($v[2], $code, 0, $charset) !== false || mb_strpos($v[0], $code, 0, $charset) !== false || mb_strpos($v[1], strtoupper($code), 0, $charset) !== false ) {$tmp[$k] = $v[2] . ' ' . $v[0];$num++;$i++;}if ($i > 7) break;}}return array_values($tmp);}