layui实现搜索下拉

假装我不帅

已于 2025-03-26 14:53:17 修改

阅读量264

点赞数

分类专栏： js 文章标签： layui javascript 搜索下拉

于 2025-02-21 10:15:34 首次发布

原文链接：https://zhuanlan.zhihu.com/p/684733439

版权

js 专栏收录该内容

103 篇文章

订阅专栏

下拉搜索

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="https://unpkg.com/layui@2.9.23/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-inline" style="width: 235px;">
  <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="ID-dropdown-demo-base-input">
</div>

  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="https://unpkg.com/layui@2.9.23/dist/layui.js"></script> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 绑定输入框
  dropdown.render({
    elem: '#ID-dropdown-demo-base-input',
    closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
    data: [{
      title: 'menu item 1',
      id: 101
    },{
      title: 'menu item 2',
      id: 102
    },{
      title: 'menu item 3',
      id: 103
    },{
      title: 'menu item 4',
      id: 104
    },{
      title: 'menu item 5',
      id: 105
    },{
      title: 'menu item 6',
      id: 106
    }],
    click: function(obj){
      this.elem.val(obj.title);
    },
    style: 'min-width: 235px;'
  });
});
</script>

</body>
</html>

在这里插入图片描述

搜索下拉框

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="https://unpkg.com/layui@2.9.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-inline layui-padding-5">
  <input name="" placeholder="请搜索或选择" class="layui-input" id="ID-dropdown-demo">
</div>
  
<script src="https://unpkg.com/layui@2.9.6/dist/layui.js"></script> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var $ = layui.$;
  var inst = dropdown.render({
    elem: '#ID-dropdown-demo',
    data: [],
    click: function(obj){
      this.elem.val(obj.title);
      this.elem.attr('data-id', obj.id)
    }
  });

  /*
  应用场景 当在一个input输入框中输入要查询的数据 要做到实时查询
  首先想到input的事件 change blur keyup input propertychange
  change 是改变属性 包括value值,触发事件需要失焦但是value值不变化不触发
  input 事件 只是改变输入框的value值, ie6-ie8 是不支持input事件的
  所以ie有自带的事件 propertychange 这个跟input一样 值改变就触发 但是 edge不支持propertychange事件 edge支持input事件
  blur事件 失焦就会触犯 如果啥也不写只是光标进去然后出来还是会触发事件
  keyup看很多人使用这个事件 但是如果别人拷贝过来的值不通过键盘粘贴,这个事件是不触发的
  所以推荐用 input 和 propertychange两个事件同时使用
  */
  $(inst.config.elem).on('input propertychange', function() {
    var elem = $(this);
    //值改变了需要清除之前选择的数据
    var value = elem.val().trim();
    elem.removeAttr('data-id');
    console.log('改变值模拟获取数据');
    console.log(inst.config.id);
    
    var dataNew = mockData(value);
    dropdown.reloadData(inst.config.id, {
      data: dataNew
    })
  });

  $(inst.config.elem).on('blur', function() {
    //如果没有选择数据 则清空input输入的内容
    var elem = $(this);
    var dataId = elem.attr('data-id');
    if (!dataId) {
        elem.val('');
    }
  });
  
  function mockData(value) {
    //实际环境通过ajax请求获取数据
    return [
      {id: 1, title: value + '1'},
      {id: 2, title: value + '2'}
    ];
  }
});
</script>
 
</body>
</html>