三种下拉搜索框-html、select2、angularJs

一、概述需要做一个简单的下拉搜索，简单收集整理了下几种下拉搜索实现。分别为只用html,使用select2，使用angular。没有优化界面，只用基本功能。简单整合，资源为相对路径直接可以直接用。链接：https://pan.baidu.com/s/1XlmJPTzfnWvPmwbBTuXt-w提取码：4b50二、使用HTML使用html的DataList代码：<html><he

星河之砂

3928人浏览 · 2021-12-06 22:18:58

星河之砂 · 2021-12-06 22:18:58 发布

一、概述

需要做一个简单的下拉搜索，简单收集整理了下几种下拉搜索实现。分别为只用html,使用select2，使用angular。没有优化界面，只用基本功能。

简单整合，资源为相对路径直接可以直接用。

链接：https://pan.baidu.com/s/1XlmJPTzfnWvPmwbBTuXt-w
提取码：4b50

二、使用HTML

使用html的DataList

代码：

<html>
<head>
    <title>下拉输入框</title>
	
</head>
<body>
    <form>	
		<div>DATALIST下拉输入框</div>
		<div class="form-group country-opt-group">
			<input class="form-control input_value  " id="dataitem" list="DATALIST"/>
				   <datalist id="DATALIST" class="country-opt">
							 <option >1111</option> 
							 <option >2222</option> 
							 <option >3333</option> 
				   </datalist>
			</input>
		</div>
		<div>
    </form>
</body>
</html>

运行效果：

三、使用select2

代码：

<html>
<head>
    <title>下拉输入框</title>
	<script src="jquery/jquery.min.js" type="text/javascript"></script>
    <link href="jquery-select2/3.4/select2.min.css" rel="stylesheet">
    <script src="jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
	
</head>
<body>
    <form>
        
		
		<div>select下拉输入框</div>
		<select class="js-select2" name="state">
		  <option value="1">张三</option>
		  <option value="2">李四</option>
		  <option value="2">王五</option>
		</select>
		</div>
		
        <script>

			$(document).ready(function() {
				$('.js-select2').select2();
			})

        </script>
    </form>


</body>
</html>

效果：

三、使用angularJs

代码：

 <html>
 <head>
  <meta charset="utf-8">
  <title>搜索下拉框</title>
<script src="jquery/jquery.min.js" type="text/javascript"></script>
	 <script src="angular/angular.min.js" type="text/javascript"></script>

 <style>

 </style>
 <script>
     $(function(){
         $('#mylab').focus(function(){
            $('.wrap-mylab').slideDown();
         });
     });
     var app = angular.module('myApp',[])
		app.controller('myCtrl',function($scope){
	 });
     function passvalue(obj){
         var returnvalue = $(obj).text();
        $('#mylab').val(returnvalue);
         $('.wrap-mylab').slideUp('fast');
     }
 </script>
 </head>
 <body  ng-app="myApp" ng-controller="myCtrl" ng-init="dataname=['张三','李四','王五','邓六']">
     <div class="row">
         <div>
             <form >
                 <div>
                    <label for="mylab">选择人员: </label>
                     <div>
                         <input type="text"  id="mylab" ng-model="nowName">
                         <ul class="wrap-mylab">
                            <li onClick="passvalue(this)" ng-repeat="x in dataname | filter:nowName">{{x}}</li>
                         </ul>
                     </div>
                </div>
             </form>
         </div>
     </div>
 </body>
 </html>

效果：