JQueryUI自动补全 搜索提示实践

最近在做航运运价平台，有一个业务逻辑是需要在搜索的时候有搜索提示的，没法子，没写过，在找了很久解决方案还没有找到，快崩溃了的时候，忽然发现了jquery UI 的自动补全机制，完全符合啊，大救星。

首先描述下用户的需求，这里我们需要的是输入港口的英文名称或中文名称，然后出现搜索提示，当用户点击后，只将英文的放入搜索框中，因为运价里的港口都是英文字符，没有中文字符。

所以，我需要做的就是：1.将港口全部录入数据库 2.在用户输入的时候显示搜索提示 3.用户点击后显示英文字符。

OK，逻辑很清晰，开始动工。

数据输入数据库，这一步就不赘述了。

搜索提示的时候，用的是JQueryUI的自动补全机制

1. 对我们的输入表单应用自动补全。

$('#startport').autocomplete(option);

2. 从服务器端获取数据源，我这里应用ajax异步请求数据

/**************数据源为ajax返回的值**********************/source: function(request, callback) {var data = "term=" + request.term;$('#result').html(data);/*************ajax请求数据************************/$.get(appPath + "/Street/startportSearchTips", data, function(data) { var response = data.content;var tips = [];$(response).filter('li').each(function() {tips.push($(this).text());});callback(tips);});},

服务器端：

$querystring = $_GET['term'];          if(strlen($querystring) >0) {             $condition['portname'] = array('like', "%$querystring%");            $result = $startDB->where($condition)->limit(5)->select();            $data['status'] = 0;            foreach($result as $key => $value){                $data['content'] .= '<li>'.$value['portname'].'</li>';             }              $data['term'] = $_GET['term'];            $this->ajaxReturn($data);        }else{            $data = array('status' => 0, 'content' => '没有匹配');            $data['test'] = "没有匹配";            $data['term'] = $_GET['term'];            $this->ajaxReturn($data);         }  

当服务器检索到数据后，按格式用ajax返回，然后在js里面接收，再转变成数组的形式，用回调函数返回给source，作为数据源

3. 让建议列表更好看点，设置下样式，这里是淡出的特效

/****************打开建议列表时的样式设置***************************/        open:function(event){            var $ul = $(this).autocomplete('widget');            $ul.css('width', '200px');            $ul.css('font-size', '14px');            $ul.css('font-family', '微软雅黑');            $ul.hide().slideDown(1000);        },

4. 最后一步，选择某一项时，只上去英文字符，因为数据库中是间隔空格分开的，所以这里用空格截取

/****************在选择某一项的时候，只显示英文字符*****************/select: function(event, ui) {//截取英文字符var str = ui.item.value.substr(0, ui.item.value.indexOf(' '));return ui.item.value = str;}

最后的效果：

可以去我们的网站看看：《订单工厂》搜索提示演示

Tony, 2014.10.13 于TCS工作室