输入框自动联想功能demo

思路:

简单来看,是创建一个输入框,然后给输入框绑定事件.当事件触发后,在输入框的正下方生成一个临时的选择列表.选中列表后,将数据回写到输入框,列表消失.

下面是从网上找的两种实现方式的demo,至于哪种好用,根据自身情况来考虑

第一种,使用工具类,比如jquery-ui.js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jQuery UI 自动完成（Autocomplete） - 默认功能</title><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery-ui.js"></script><!--<link rel="style.css">--><style>body {font-family: Arial, Helvetica, sans-serif;}table {font-size: 1em;}.ui-draggable,.ui-droppable {background-position: top;}.ui-autocomplete {max-height: 220px;overflow-y: auto;/* 防止水平滚动条 */overflow-x: hidden;}</style><script>$(function() {/*jQuery.ajax({type: "post",async: false,url: "",dataType: "json",success: function(data) {res = data;$("#tags").autocomplete({source: res,//定义至少输入几个字符就可以查询minLength: 2});}});*/var res = ["妹喜", "妲己", "褒姒", "齐姜", "夏姬", "西施", "赵姬", "虞美人", "卓文君", "赵飞燕", "王昭君", "貂蝉", "大乔", "二乔", "绿珠", "祝英台", "苏小小", "张丽华", "蔡文姬", "谢道韫", "甄宓", "李祖娥", "武则天", "上官婉儿", "太平公主", "孙窈娘", "杨玉环", "关盼盼", "李师师", "杜十娘", "陈圆圆", "董小婉", "柳如是", "李香君"]$("#tags").autocomplete({source: res,//定义至少输入几个字minLength: 1});});</script></head><body><div class="ui-widget"><label for="tags">标签：</label ><input id="tags"></div></body></html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>自动填充二</title><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery-ui.js"></script><!--<link rel="style.css">--><style>body {font-family: Arial, Helvetica, sans-serif;}table {font-size: 1em;}.ui-draggable,.ui-droppable {background-position: top;}.ui-autocomplete {max-height: 220px;overflow-y: auto;/* 防止水平滚动条 */overflow-x: hidden;}</style><script>$(function() {/*jQuery.ajax({type: "post",async: false,url: "",dataType: "json",success: function(data) {res = data;$("#tags").autocomplete({source: res,//定义至少输入几个字符就可以查询minLength: 2});}});*/var res = [{"label": "妹喜","id":001,"desc":"夏亡背锅"}, {"label": "妲己","id":002,"desc":"商亡背锅"}, {"label": "褒姒","id":003,"desc":"西周亡背锅"}, {"label": "齐姜","id":004,"desc":"齐国骨科"}, {"label": "夏姬","id":005,"desc":"多人运动"}, {"label": "西施","id":006,"desc":"沉鱼"}, {"label": "赵姬","id":007,"desc":"千古一帝之母"}, {"label": "虞美人","id":008,"desc":"四面楚歌"}, {"label": "卓文君","id":009,"desc":"凤求凰一心人"}, {"label": "赵飞燕","id":010,"desc":"卑人不可以为主"}, {"label": "王昭君","id":011,"desc":"落雁"}, {"label": "阴丽华","id":012,"desc":"做官当做金吾卫"}, {"label": "貂蝉","id":013,"desc":"闭月"}, {"label": "大乔","id":014,"desc":"铜雀"}, {"label": "二乔","id":015,"desc":"春深"},{"label": "绿珠","id":016,"desc":"楼高百尺"}, {"label": "祝英台","id":017,"desc":"蝴蝶飞"}, {"label": "苏小小","id":018,"desc":"可惜"}, {"label": "张丽华","id":019,"desc":"门外韩擒虎"}, {"label": "蔡文姬","id":020,"desc":"穿越三国首推"}, {"label": "谢道韫","id":021,"desc":"丈夫无能"}, {"label": "甄宓","id":022,"desc":"流风回雪"}, {"label": "李祖娥","id":023,"desc":"北齐可怜人"}, {"label": "武则天","id":024,"desc":"千古女帝"}, {"label": "上官婉儿","id":025,"desc":"东施效颦"},{"label": "太平公主","id":026,"desc":"不平"}, {"label": "杨玉环","id":027,"desc":"羞花"}, {"label": "关盼盼","id":028,"desc":"可叹"}, {"label": "李师师","id":029,"desc":"君臣同乐"}, {"label": "杜十娘","id":030,"desc":"遇人不淑"}, {"label": "陈圆圆","id":031,"desc":"冲冠一怒"}, {"label": "董小婉","id":032,"desc":"不知道"}, {"label": "柳如是","id":033,"desc":"水太凉"}, {"label":"李香君","id":034,"desc":"书生无用"}]$("#tags").autocomplete({minLength: 0,source: res,focus: function(event, ui) {$("#tags").val(ui.item.label);return false;},select: function(event, ui) {$("#tags").val(ui.item.label);$("#tags-id").val(ui.item.id);$("#tags-description").html(ui.item.desc);return false;}}).data("ui-autocomplete")._renderItem = function(ul, item) {return $("<li>").append("<a>" + item.label+ "-" + item.desc+ "</a>").appendTo(ul);};});</script></head><body><div class="ui-widget"><labelfor="tags">标签：</label>
<input id="tags">
<input type="hidden" id="tags-id">
<p id="tags-description"></p></div></body></html>

第二种,自己写

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.3.1.min.js"></script><style>.auto_hidden {width: 204px;border-top: 1px solid #333;border-bottom: 1px solid #333;border-left: 1px solid #333;border-right: 1px solid #333;position: absolute;display: none;}.auto_show {width: 204px;border-top: 1px solid #333;border-bottom: 1px solid #333;border-left: 1px solid #333;border-right: 1px solid #333;position: absolute;z-index: 9999;/* 设置对象的层叠顺序 */display: block;}.auto_onmouseover {color: #ffffff;background-color: highlight;width: 100%;}.auto_onmouseout {color: #000000;width: 100%;background-color: #ffffff;}</style><script>var Auto = function(id) {return "string" == typeof id ? document.getElementById(id) : id;}var Bind = function(object, fun) {return function() {return fun.apply(object, arguments);}}function AutoComplete(obj, autoObj, arr) {this.obj = Auto(obj); //输入框this.autoObj = Auto(autoObj); //DIV的根节点this.value_arr = arr; //不要包含重复值this.index = -1; //当前选中的DIV的索引this.search_value = ""; //保存当前搜索的字符}AutoComplete.prototype = {//初始化DIV的位置init: function() {this.autoObj.style.left = this.obj.offsetLeft + "px";this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";this.autoObj.style.width = this.obj.offsetWidth - 2 + "px"; //减去边框的长度2px   },//删除自动完成需要的所有DIVdeleteDIV: function() {while(this.autoObj.hasChildNodes()) {this.autoObj.removeChild(this.autoObj.firstChild);}this.autoObj.className = "auto_hidden";},//设置值setValue: function(_this) {return function() {_this.obj.value = this.seq;_this.autoObj.className = "auto_hidden";}},//模拟鼠标移动至DIV时，DIV高亮autoOnmouseover: function(_this, _div_index) {return function() {_this.index = _div_index;var length = _this.autoObj.children.length;for(var j = 0; j < length; j++) {if(j != _this.index) {_this.autoObj.childNodes[j].className = 'auto_onmouseout';} else {_this.autoObj.childNodes[j].className = 'auto_onmouseover';}}}},//更改classnamechangeClassname: function(length) {for(var i = 0; i < length; i++) {if(i != this.index) {this.autoObj.childNodes[i].className = 'auto_onmouseout';} else {this.autoObj.childNodes[i].className = 'auto_onmouseover';this.obj.value = this.autoObj.childNodes[i].seq;}}},//响应键盘pressKey: function(event) {var length = this.autoObj.children.length;//光标键"↓"if(event.keyCode == 40) {++this.index;if(this.index > length) {this.index = 0;} else if(this.index == length) {this.obj.value = this.search_value;}this.changeClassname(length);}//光标键"↑"else if(event.keyCode == 38) {this.index--;if(this.index < -1) {this.index = length - 1;} else if(this.index == -1) {this.obj.value = this.search_value;}this.changeClassname(length);}//回车键else if(event.keyCode == 13) {this.autoObj.className = "auto_hidden";this.index = -1;} else {this.index = -1;}},//程序入口start: function(event) {if(event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {this.init();this.deleteDIV();this.search_value = this.obj.value;var valueArr = this.value_arr;valueArr.sort();if(this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") {return;} //值为空，退出try {var reg = new RegExp("(" + this.obj.value + ")", "i");} catch(e) {return;}var div_index = 0; //记录创建的DIV的索引for(var i = 0; i < valueArr.length; i++) {if(reg.test(valueArr[i])) {var div = document.createElement("div");div.className = "auto_onmouseout";div.seq = valueArr[i];div.onclick = this.setValue(this);div.onmouseover = this.autoOnmouseover(this, div_index);div.innerHTML = valueArr[i].replace(reg, "<strong>$1</strong>"); //搜索到的字符粗体显示this.autoObj.appendChild(div);this.autoObj.className = "auto_show";div_index++;}}}this.pressKey(event);window.onresize = Bind(this, function() {this.init();});}}var autoComplete;var i = 0;var res = ["妹喜", "妲己", "褒姒", "齐姜", "夏姬", "西施", "赵姬", "虞美人", "卓文君", "赵飞燕", "王昭君","阴丽华","貂蝉", "大乔", "二乔", "绿珠", "祝英台", "苏小小", "张丽华", "蔡文姬", "谢道韫", "甄宓", "李祖娥", "武则天", "上官婉儿", "太平公主", "孙窈娘", "杨玉环", "关盼盼", "李师师", "杜十娘", "陈圆圆", "董小婉", "柳如是", "李香君"]function search() {if(i == 0) {autoComplete = new AutoComplete('autoShow', 'autoHide', res);i = 1;}autoComplete.start(event);}//--></script></head><body><h1 align="center">自动填充</h1><div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="autoShow" onkeyup="search()"></div><div class="auto_hidden" id="autoHide"><!--自动完成 DIV--></div><script></script></body></html>

输入框自动联想功能demo相关推荐

类似百度输入框自动联想功能遇到的问题:Opera浏览器不支持拼音输入法时的keyup事件
这个问题也许很多人都遇到过了,在百度能搜到很多遇到相同问题的人,但解决办法都是一个(下面是载自其他网页): [ 问题ZcT345站长站在开启输入法的情况下,三个浏览器的具体问题如下:ZcT345站长 ...
js输入框的联想功能
问题:最近最近公司要搞一个弹框页面上显示一个输入框,并且可以联想出具体的地铁站名称,功能类似于百度效果,对于这个功能自己写一套,感觉还是自己技术不够,所以找了很久,终于发现一个可以支持中文联想功 ...
五笔新手，打开搜狗五笔输入法自动联想功能
刚学五笔,打字堪称龟速,打开联想功能能方便点. 打开输入法"设置属性" -> 高级-> 使用词语联想. 这只是暂时 ,不太好用. 等熟悉了就好了.
如何解决IDEA中输入sout，psvm后没有自动联想功能的问题。
File ----> Setting 选中Live Templates 搜索sout和psvm 注意左下角: 当然你的电脑上的显示会与我不同,但是你只要知道,这里的作用是限制"sout ...
模拟百度搜索框自动联想功能，原生js+jsonp轻松搞定
链接下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果前端博客传送门 LeetCode个人题解传送门讲解如何利用百度接口仿写一个搜索联想词功能效果 ...
仿百度，谷歌输入框自动提示功能
大家使用百度谷歌的时候都会有输入自动提示的功能,心血来潮自己用Ajax模拟了一个,和大家分享分享. 下面让我们先看下效果: 输入自动提示键盘上下移动选取鼠标选取同样支持支持中文匹配 JS ...
Salesforce中jquery ui中的autoComplete实现自动联想
项目中,我们有时候会需要实现自动联想功能,比如我们想输入用户或者联系人名称,去联想出系统中有的相关的用户和联系人,当点击以后获取相关的邮箱或者其他信息等等.这种情况下可以使用jquery ui中的au ...
JavaScript 事件：Web 表单如何实现禁用右键、复制粘贴/剪切和输入框自动填充？
文章目录前言一.禁用鼠标右键 1.1.分析说明 1.2.操作原理 1.3.实现效果 1.4.实现代码 1.5.补充:JS 中的 button 事件属性二.禁用复制粘贴 2.1.分析说明 2.2. ...
eclipse中html联想设置,设置eclipse联想功能
当我们在用eclipse的时候,怎么能够让自己的编码速度加快?我想利用eclipse的提示功能是其中的方法之一.下面就利出配置eclipse联想功能(代码的提示功能)的步骤: 1. 打开Eclipse ...

输入框自动联想功能demo

输入框自动联想功能demo相关推荐

最新文章

热门文章