使用layui bootstrap 实现input标签下拉带搜索功能_bootstrap 搜索型input-优快云博客

本文介绍如何使用Bootstrap和layui等框架实现网页中的下拉框带有搜索功能，包括具体代码示例，适合前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现input标签下拉带搜索功能

方法一：使用 bootstrap

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bootstrap 搜索下拉框</title>
  <!-- jquery 项目已有就无需再引入-->
  <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  <!-- bootstrap 项目已有 bootstrap就无需再引入-->
  <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- bootstrap-select -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
  <style>
    .bootstrap-select.form-control:not([class*=col-]){width: 200px;}
    .bs-actionsbox, .bs-donebutton, .bs-searchbox{padding: 2px;}
  </style>
</head> 
<body>
  <select class="selectpicker show-tick form-control" data-live-search="true">
    <option>四川(sichuan)</option>
    <option>湖南(hunan)</option>
    <option>湖北(hubei)</option>
    <option>广东(guangdong)</option>
    <option>北京(beijing)</option>
    <option>河南(henan)</option>
  </select>
</body>

在这里插入图片描述

方法二：layui

layui的库无法在线调用，需要下载后，从本地加载

官网 - 获得 layui

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./static/layui/css/layui.css">
  <style>
    .layui-form-item{ width: 300px;}
  </style>
</head>
<body> 
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required" lay-search>
        <option value=""></option>
        <option value="0">成都</option>
        <option value="1">武汉</option>
        <option value="2">长沙</option>
        <option value="3">合肥</option>
        <option value="4">郑州</option>
      </select>
    </div>
  </div>
</form>
</body>
<script src="./static/layui/layui.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript"> 
layui.use('form', function(){
    var form = layui.form;
    var $ = layui.$;
    form.render();
    //每次渲染之后手注册事件
    $("dl").prev().find("input").attr("onkeydown","listenSelect.up(event,this)");
}); 
</script>

在这里插入图片描述

在项目中使用 layui

 <link rel="stylesheet" href="/public/static/layui/css/layui.css">
  <td>状态</td>
  <td>
    <div class="layui-form ">
      <select name="city" lay-verify="required" lay-search>
      <option value="">请选择</option>
      <option value="0" >未付款wfk</option>
      <option value="1" >已付款yfk</option>
      <option value="2" >未确认</option>
      <option value="3" >已确认yqr</option>
      <option value="4" >已发货</option>
      <option value="5" >部分发货</option>
      <option value="6" >已收件</option>
      <option value="7" >已换货</option>
      <option value="8" >已退款</option>
      <option value="9" >已退货退款</option>
      <option value="10" >交易关闭</option>
      <option value="11" >交易成功</option>
      </select>
  </div>
</td>
  <script src="/public/static/jquery.min.js"></script>
  <script src="/public/static/layui/layui.js"></script>
  <script>
    layui.use('form', function(){
    var form = layui.form;
    var $ = layui.$;
    form.render();
});
</script>

在这里插入图片描述

方法四：

引入 layui插件实现
index.html

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

<form action="" method="post">
  <div class="layui-form">
    <select name="abc" id="" lay-search="">      
    <option></option>
    <option>abc</Doption>
    <option>ace</option>
    <option>axb</option>
    <option>azz</option>
    </select>
  </div>
</form>

<script>
layui.use(['form', 'element'], function(){
  var form = layui.form,
   element = layui.element;
})
</script>

在这里插入图片描述

方法五：

不使用任何框架
此方法不支持所有浏览器

<p>
    <label for="myFruit">What's your favorite fruit?</label>
    <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
    <datalist id="mySuggestion">
      <option>Blackberry</option>
      <option>Blueberry</option>
      <option>Lemon</option>
      <option>Orange</option>
      <option>Pear</option>
      <option>Watermelon</option>
    </datalist>
</p>

在这里插入图片描述