因为客户临时要求加一个输入框自动联想,就开始了解这块。结合网上总结最难的一点就是找好对应的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.cssHTML代码:
<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包。