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工作室