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

input autocomplete属性设计输入框自动联想(php实现)的更多相关文章

  1. [LeetCode] Design Search Autocomplete System 设计搜索自动补全系统

    Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...

  2. [LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统

    Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...

  3. salesforce零基础学习(八十)使用autoComplete 输入内容自动联想结果以及去重实现

    项目中,我们有时候会需要实现自动联想功能,比如我们想输入用户或者联系人名称,去联想出系统中有的相关的用户和联系人,当点击以后获取相关的邮箱或者其他信息等等.这种情况下可以使用jquery ui中的au ...

  4. DataList:HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

  5. HTML5 autocomplete属性、表单自动完成

    autocomplete属性 1.定义autocomplete属性规范表单是否启用自动完成功能.自动完成允许浏览器对字段的输入,是基于之前输入的值.2.应用范围autocomplete使用<fo ...

  6. input输入框自动填充黄色背景解决方案

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  7. autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示

    autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...

  8. input输入框实现联想关键词功能

    实现原理很简单,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...

随机推荐

  1. hadoop生态之mapReduce-Yarn

    一.inputSplit 1.什么是block 块是以 block size 进行划分数据. 因此,如果群集中的 block size 为 128 MB,则数据集的每个块将为 128 MB,除非最后一 ...

  2. 010-3 Socket协议ProtocolType

    ProtocolType成员 成员名称 说明 Ggp 网关到网关协议. Icmp Internet 控制消息协议. IcmpV6 IPv6 的 Internet 控制消息协议. Idp Interne ...

  3. Python-re模块中一些重要函数

    re模块包含对正则表达式的支持.

  4. mac 配置jdk,maven环境变量

    Java和maven环境变量配置: 1.打开终端:输入命令:vi ~/.bash_profile 2.再输入 i 进入编辑模式 输入以下: export JAVA_HOME=/Library/Java ...

  5. CentOS下RPM方式安装MySQL5.6(转载)

    之前的项目全都在windows系统环境下部署的,这次尝试在Linux系统环境下部署,于是这次我们组织在7台主机上安装了JDK.Maven.Jboss其中一台安装了Mysql,并将局域网配置好,终于大功 ...

  6. selenium定位方式-获取标签元素:find_element_by_xxx

    定位方式取舍# 唯一定位方式.多属性定位.层级+角标定位(离目标元素越近,相对定位越好) # 推荐用css selector(很少用递进层次的定位)# 什么时候用xpath呢? 当你定位元素时,必须要 ...

  7. parallels desktop for mac安装虚拟机 之parallelsdesktop密钥 以及 parallels desktop安装win10的办公推荐可以提高办公效率

    大家好我是一个老程序员了. 用惯了 mac , 平时工作都是在  mac安装虚拟机,之后就是mac 安装 win10. 因为很多办公软件 mac 都不好用,主要是跟同事沟通不方便,当然mac 的软件还 ...

  8. java平台学习笔记

    java程序从编写源码开始到程序执行一共有三个阶段,编写期,编译期,运行期. 通常,人们都希望自己的程序更快(不仅仅是执行更快,也有编写更快),因此java在不断更新. java源码先通过javac编 ...

  9. 机器学习基石12-Nonlinear Transformation

    注: 文章中所有的图片均来自台湾大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 上一节课介绍了分类问题的三种线性模型,可以用来解决binary classif ...

  10. pwnable.tw calc

    题目代码量比较大(对于菜鸡我来说orz),找了很久才发现一个能利用的漏洞 运行之发现是一个计算器的程序,简单测试下发现当输入的操作数超过10位时会有一个整型溢出 这里调试了一下发现是printf(&q ...