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.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实现)的更多相关文章
- [LeetCode] Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- [LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- salesforce零基础学习(八十)使用autoComplete 输入内容自动联想结果以及去重实现
项目中,我们有时候会需要实现自动联想功能,比如我们想输入用户或者联系人名称,去联想出系统中有的相关的用户和联系人,当点击以后获取相关的邮箱或者其他信息等等.这种情况下可以使用jquery ui中的au ...
- DataList:HTML5中的input输入框自动提示宝器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...
- HTML5 autocomplete属性、表单自动完成
autocomplete属性 1.定义autocomplete属性规范表单是否启用自动完成功能.自动完成允许浏览器对字段的输入,是基于之前输入的值.2.应用范围autocomplete使用<fo ...
- input输入框自动填充黄色背景解决方案
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...
- autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示
autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...
- input输入框实现联想关键词功能
实现原理很简单,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...
随机推荐
- 二周工作总结(php方向)
前言:年后回来在忙着换工作,最终拿到了三家的offer,最后权衡去了一家实业公司做oa系统的开发,刚入职做一些技术的总结同时记录自己的技术进步 (一) 用mysql视图实现多个表之间的联查 优点:在实 ...
- [源码分析]读写锁ReentrantReadWriteLock
一.简介 读写锁. 读锁之间是共享的. 写锁是独占的. 首先声明一点: 我在分析源码的时候, 把jdk源码复制出来进行中文的注释, 有时还进行编译调试什么的, 为了避免和jdk原生的类混淆, 我在类前 ...
- ConcurrentHashMap扩容
然后,说说精华的部分. Cmap 支持并发扩容,实现方式是,将表拆分,让每个线程处理自己的区间.如下图: 假设总长度是 64 ,每个线程可以分到 16 个桶,各自处理,不会互相影响. 而每个线 ...
- Swagger UI及 Swagger editor教程 API文档搭配 Node使用
swagger ui 是一个在线文档生成和测试的利器,目前发现最好用的.为啥好用呢?打开 demo,支持API自动生成同步的在线文档些文档可用于项目内部API审核方便测试人员了解 API这些文档可作为 ...
- Python——正则表达式初步应用(一)
1.先附上转载(www.cnblogs.com/huxi)的一张图,有重要的参考价值,其含义大家请通过阅读来理解. 2.附上初步学习Python时编写的一个爬糗事百科段子的代码. # -*- codi ...
- jar包中File 文件找不到的异常分析与解决
源链接: http://hxraid.iteye.com/blog/483115#comments 我们常常在代码中读取一些资源文件(比如图片,音乐,文本等等).在单独运行的时候这些简单的处理当然不会 ...
- python中的图像数据库PIL
from PIL import Image im = Image.open("图片路径") im.function() 常用的函数: 1.im.crop(x,y,x1,y1) 对图 ...
- laravel-mix的安装
Laravel-mix的安装 Laravel Mix 是一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行.Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 ...
- Java Socket 服务端发送数据 客户端接收数据
服务端: package com.thinkgem.wlw.modules.api.test.socket; /** * @Author: zhouhe * @Date: 2019/4/8 9:30 ...
- Python的re模块中search与match的区别
1.search和match: search:在整个字符中匹配,如果找不到匹配的就返回None match:在字符串开始位置匹配如果不匹配就返回None 2.效率对比: search: match: