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包。 

posted @ 2018-01-29 15:43  MLorCT  阅读(327)  评论(0编辑  收藏  举报