JavaScript实现模糊推荐的input框(类似搜索框)
时间:2022-05-02
本文章向大家介绍JavaScript实现模糊推荐的input框(类似搜索框),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何用JS实现一个类似搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图:
实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jquery的keyup事件,以及ajax与服务端的交互。
废话少说直接上代码:
引用,需要jquery-ui和jquery:
<link rel="stylesheet" href="/static/plugins/jqueryui1/jquery-ui-autocomplete.css">
<link rel="stylesheet" href="/static/plugins/jqueryui1/jquery-ui-1.7.1.css">
<script src="/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/static/plugins/jQueryUI/jquery-ui.min.js"></script>
html输入框的设计,一个文本输入框和一个隐藏输入框:
<span class="bd_DW_checkbox_left_10">路径:</span>
<span>
<input type="text" id="path" class="bd_DW_input_len_350">
<input type="hidden" id="hidden_path" class="bd_DW_input_len_350"/>
</span>
js代码中实现:
1、autocomplete自动填充
2、keyup事件
3、ajax与后端交互
简单来说:
1、文本输入框的每次键入,触发一个keyup事件;
2、事件的处理方式是向后端请求模糊推荐的项items,这里的返回数据结果是:
{
"errno": 0;
"data": ["path1", "path2" ... "pathN"]
}
3、autocomplete自动填充hidden输入框,其余的事情jquery-ui会为你处理好;
4、当你点选完成,或者是输入完成后,path框失去焦点(blur事件)的时候,会从后端请求数据,自动填充好各个输入框add_field。
具体代码如下:
function time_path_select() {
//定义新数组
var path_data = [];
var _path_data = [];
$("#time_path").autocomplete({
source: _path_data
});
$("#time_path").keyup(
function(event){
var path=$("#time_path").val();
if(path.length>0){
var data_dict = send_get("/paths?path=" + path)
var data = data_dict['data'];
var len = data.length;
for(var i=0;i<len-1;i++){
path_data[i]=data[i];
};
$("#hidden_path").val(path_data);
var _data=$("#hidden_path").val().split(",");
for(var j=0;j<_data.length;j++){
_path_data[j]=_data[j];
}
}
}
);
}
- HDUOJ---2082
- HDUOJ---2152
- nyoj-----D的小L
- HDUOJ---The Moving Points
- HDUOJ---------Kia's Calculation
- HDUOJ----Good Numbers
- DP较为完整的知识
- HDUOJ----The Number Off of FFF
- HDUOJ-------Naive and Silly Muggles
- HDUOJ----A Computer Graphics Problem
- HDUOJ---(4708)Herding
- HDUOJ---(4708)Rotation Lock Puzzle
- HDUOJ---Hamming Distance(4712)
- HDUOJ-----Difference Between Primes
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 完整的卸载Jdk java环境教程
- HTML 元素标签语义化及使用场景
- 共享内存原理与VCS监控采集实战
- Spark中的聚类算法
- 【Linux_Shell 脚本编程学习笔记六、shell的数值运算】
- Java自动化测试(adb常用命令 32)
- 前端学习计算机理论知识的好处
- 【Vue 学习笔记 一、Vue开发环境搭建】
- Vue 图片上传组件(base64 版):vue-upload-imgs
- 三、运行时的动态常量(学习笔记)
- Vue Cli 3 打包配置--自动忽略 console.log 语句
- git 常用命令介绍
- PAT (Basic Level) Practice (中文)1043 输出PATest (20 分)
- PAT (Basic Level) Practice (中文)1047 编程团体赛 (20 分)
- Vue中computed分析