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