html选择框加模糊查找,HTML input框动态模糊查询,能输入,能选择

Title

$('input#batch').bind('keyup', function () {

var batch = $('input#batch').val();

$.ajax({

url: "/search_batch/",

type: "GET",

dataType: 'json',

data: {'batch': batch},

async: false,

success: function (arg) {

$('datalist#batch_list').empty();

for (var i = 0; i < arg.length; i++) {

var add_options = ''+ arg[i] + '';

$('datalist#batch_list').append(add_options);

}

}

})

});

注意:

1、 关闭输入框的历史记录功能 ,autocomplete=”off”。否则会将用户的输入历史记录也显示出来。

2、datalist标签的id要与input标签的list属性的值一致。

3、动态获取input的输入值,给input标签绑定“keyup”事件。

4、要引入jquery。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现下拉框的模糊查询,可以使用JavaScript来动态过滤下拉框选项。具体实现方式如下: 1. 给下拉框添一个输入框,用于输入查询的关键字。 2. 监听这个输入框的change事件,每次输入内容发生变化时,都要重新过滤下拉框选项。 3. 获取下拉框的所有选项,遍历每个选项,判断选项的文本内容是否包含输入框中的关键字,如果包含,则显示该选项,否则隐藏该选项。 以下是一个简单的例子,实现了一个带有输入框的下拉框,可以通过输入框中的关键字来过滤下拉框选项: HTML代码: ```html <label for="select">下拉框:</label> <input type="text" id="select-filter"> <select id="select"> <option value="1">苹果</option> <option value="2">香蕉</option> <option value="3">橙子</option> <option value="4">西瓜</option> <option value="5">葡萄</option> </select> ``` JavaScript代码: ```javascript var select = document.getElementById('select'); var selectFilter = document.getElementById('select-filter'); // 监听输入框变化事件 selectFilter.addEventListener('change', function() { // 获取输入框中的关键字 var keyword = selectFilter.value.toLowerCase(); // 遍历下拉框的选项,过滤掉不符合条件的选项 for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; var text = option.text.toLowerCase(); if (text.indexOf(keyword) >= 0) { option.style.display = ''; } else { option.style.display = 'none'; } } }); ``` 这样就可以实现一个简单的下拉框模糊查询功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值