input autocomplete属性设计输入框自动联想（php实现）

因为客户临时要求加一个输入框自动联想，就开始了解这块。结合网上总结最难的一点就是找好对应的js版本以及相应的jQuery-ui；

以下是我用的版本，以及连接地址：

jQuery的js文件：

<script type='text/javascript' src='resource/js/lib/jquery-1.9.1.js'></script>

下载地址：http://code.jquery.com/jquery-1.9.1.js

jQuery UI的js文件：

<script type='text/javascript' src='resource/js/lib/jquery-ui.js'></script>

下载地址：http://code.jquery.com/ui/1.10.3/jquery-ui.js

jQuery UI的css文件：

<link type="text/css" rel="stylesheet" href="../addons/oil_shopping_test/images/jquery-ui.css">　　

下载地址：http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css

HTML代码：

<input type="text" class="form-control" id="sendplateno" name="sendplateno" autocomplete="off">

 JS代码 :

<script type="text/javascript">
$(function(){
  	var search=$("#sendplateno");
  	var source  =new Array();//["aab","aac","bbd","bbn"];
　　　　　//当输入框输入时通过ajax从后台获取数据不断更新source　
  	search.keyup(function(){
     	var url = "{php echo $this->createMobileUrl('myorder', array('op' => 'sendplatenos'));}";
     	$.post(url, {'key':$("#sendplateno").val()}, function(data) {	
     		var data = $.parseJSON(data);
     		//alert(data[0].sendplateno);         		
     		 for(var i = 0; i < data.length; i++){  
     			 //alert(data[i].sendplateno);
                  source[i] = data[i].sendplateno;  
              }
     		  //alert(source);
				
			});
     });
    search.autocomplete({  
        source:source,  
            messages: {  //message设置不出现匹配关键字的结果  
                noResults: '',  
                results: function() {}  
            }  
    });  
	})
	
    });
    
</script>　

后台查询代码

elseif($op=='sendplatenos'){
			if ($_W['isajax']){
				$key = $_GPC['key'];
				$where = " weid = '{$_W['uniacid']}'";
				$where .= " and sendplateno LIKE '%{$_GPC['key']}%'";
				$sql = "SELECT sendplateno FROM " . tablename('shopping_order') . " WHERE $where ORDER BY id DESC limit 8";
				$list = pdo_fetchall($sql);
				exit(json_encode($list));
				
			}			
		}　　

　PS：这是PHP实现的，但我觉得思路对了JAVA也可以，最重要的还是找对jar包。　

转载于:https://www.cnblogs.com/mlorct/p/8377677.html