如何用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];
}
}
}
);
}
function send_get(url) {
var json_data = "";
$.ajax({
type:"get",
url:url,
datatype:"json",
async: false,
error: function() {
pop_window("请求数据失败");
},
success:function(data) {
//json_data = $.parseJSON(data);
json_data = data;
},
});
return json_data;
}
function pop_window(message) {
layer.alert(message, {
skin: 'layui-layer-lan',
closeBtn: 0
});
}
function add_field() {
$('#time_path').blur(function(){
var path = $('#time_path').val();
var json_data = send_get('/time_config_item?path=' + path);
if (json_data != {}) {
$("#time_buffer_time").val(json_data['buffer_time']);
$("#time_task_name").val(json_data['item_name']);
$("#time_email").val(json_data['owner_email']);
$("#time_phone").val(json_data['owner_phone']);
$("#time_owner").val(json_data['owner']);
$("#bd_DW_monitor_status_select").val(json_data['status']);
var cron_config = json_data['cron_config'];
var list = cron_config.split(':');
if (list[0] == '*') {
$('#bd_DW_monitor_type_select').val('hour');
}
else {
$('#bd_DW_monitor_type_select').val('day');
}
$("#time_hour").val(list[0]);
$("#time_minute").val(list[1]);
}
});
}
 

JavaScript实现模糊推荐的input框(类似百度搜索框)的更多相关文章

  1. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  2. 使用DWR实现自动补全 类似百度搜索框的自动显示效果

    使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引 ...

  3. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  4. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  5. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  6. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  7. JS---DOM---案例:模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  8. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  9. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

随机推荐

  1. [转载]历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX

    原文地址:历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版)下载作者:盖世天星 历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉 ...

  2. 转: 【Java并发编程】之十四:图文讲述同步的另一个重要功能:内存可见性

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17288243 加锁(synchronized同步)的功能不仅仅局限于互斥行为,同时还存在另 ...

  3. 部署自己的GitLab

    先说明一下自己的想法:无论怎么样,个人确实先不想升级到centos7上面,因为我觉得centos6还是比较占用资源少的,而且作为生产环境,centos6完全够用了. 实验测试环境: * centos ...

  4. 【Alpha】——Fourth Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 完善添加功能 测试统计功能 郑靖涛 完善删除功能 着手编写报表设计 杨海亮 完善查找功能 协助编写统计功能 ...

  5. 201521123017 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 Q1.网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 te ...

  6. 201521123100 《java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  7. linux目录结构图

  8. lintcode.44 最小子数组

    最小子数组   描述 笔记 数据 评测 给定一个整数数组,找到一个具有最小和的子数组.返回其最小和. 注意事项 子数组最少包含一个数字 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题 ...

  9. Maven第二篇【Idea下使用Maven】

    详情可参照详细的Maven教程-Idea环境下 值得追加的是:在修改web.xml路径的时候,那篇博文并没有给出绝对的路径-这里可能有些人不知道怎么写.我给出来参考 X:\Users\ozc\Desk ...

  10. linux加载与使用ko驱动

    linux驱动和有两种形式: 1:编译到内核 2:编译为ko模块 这里记录下ko模块使用方法. 首先cd到/var/lib/(内核版本)/drivers/ 在这里面找到要装载的模块ko文件 modpr ...