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

一、概述

        需要做一个简单的下拉搜索,简单收集整理了下几种下拉搜索实现。分别为只用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>

效果:

 

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值