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];}}});
}

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]);        }    });}

转载于:https://www.cnblogs.com/kangoroo/p/6349567.html

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

模糊查询（类似百度搜索框）
很常见的搜索框,很常用,总结一下,怕自己忘了,使用的是原生的js. 这是原生写的,代码很简单,重要是思路.主要就是用了一个indexOf(),很简单.越简单的东西越难想到,很多人都会想到用正则去做,这 ...
vue实现搜索框搜索新增_基于Vue el-autocomplete 实现类似百度搜索框功能_含真_前端开发者...
效果图如下所示: 首先上代码让数据触手可及 class="inline-input search-input" v-model="searchContent" ...
类似百度搜索框实时搜索的实现
1.html代码 <input type="text" name="ProjectNumber" id="ProjectNumber" ...
jQuery实现百度搜索框
最近项目需求,写了一个类似百度搜索框的功能. 把代码整理了一遍,然后分享出来给大家看看,如果有不对的地方请多指教. 实现效果使用的语言:html,css,JavaScript,jQuery 代码部分 ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
百度搜索框代码（有下拉提示的）
根据不同类型的网站需求,我们一共提供三种引入方式供您选择: ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有&qu ...
JavaScript实现百度搜索框提示
案例---百度搜索框提示文章目录一.代码二.代码解释效果图(百度): 输入aa后底下就会出现相对应和aa有关系的一些提示. 一.代码 <!DOCTYPE html> <htm ...
有历史搜索记录的搜索框（百度搜索案例）
带有历史搜索词条的搜索框记录一下带有历史搜索词条的搜索框,具体效果类似百度搜索: 点击搜索框展示历史搜索词条列表: 点击搜索框以外的区域隐藏历史搜索词条列表: 点击删除除去对应词条. 效果图: ...
[百度搜索框Bootstrap模仿]
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>百度搜 ...

JavaScript实现模糊推荐的input框(类似百度搜索框)

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

最新文章

热门文章