可输入可筛选的select下拉框

本文主要记载如何实现可输入并通过过滤器，筛选下拉数据的select框。

• 方法1：使用datalist标签，但是datalist及其选项不会被显示出来，他仅仅是合法的输入列表:

<label>请选择：</label>
<input type="text" id="txt_ide" list="myid" />
<datalist id="myid"> 
	<select>
		<option>夜班</option>
		<option>白班</option>
	</select>
</datalist>

• 方法2：使用input框覆盖select框，当select框选取数据时，将select选取的数据赋值给input框，将input框值赋给需要传递给后台的数据变量，将select框ng-modal绑定的数据赋值给input框ng-modal绑定的数据。根据input值筛选select显示的数据。

参考普通js实现方法：

<div style="position:relative;">
      <span style="margin-left:100px;width:18px;overflow:hidden;">
       <select id="DanWei" style="width:235px;margin-left:-86px;height:31px;" οnchange="danwei()">
             <option value="m3/s" selected>m3/s</option>
             <option value="mm">mm</option>
             <option value="℃">℃</option>
             <option value="KV">KV</option>
        </select>
        </span>  
     <input type="text" id="units" name="units" style="width: 215px;margin-left: -239px;height: 31px;color:#000;">
</div>
 
<script type="text/javascript">
     //用于单位选择更换赋值给文本框
     function danwei(){
          var text=$("#DanWei").val();
          $("#units").val(text);
     }
</script>

使用ionic和angular实现，并改变select框默认样式：
（1）HTML上：

	<div class="list">
       <div class="item item-input">
         <i class="icon ion-ios-medical" style="color: #c63b1b"></i>
         <span class="inputTitle1" >车队名称：</span>&nbsp;
         <div class="SG-line-sel">
           <select class="SGinpuSelect "  ng-model="vm.myselectone1" ng-change="vm.mySelectFu1()">
             <option value=""></option>
             <option ng-repeat="item in vm.selectData1  | filter:{'FLEET_CODE':vm.mytest1}" value="{{item.FLEET_CODE}}">{{item.FLEET_CODE}} ---- {{item.FLEET_NAME}}</option>
           </select>
         </div>
         <span><input   type="text" name="SGinputSelect1" ng-model="vm.mytest1" id="SGinputSelect1" placeholder="请输入或选择车队"  ></span>
         <span style="margin-left:5px"><a class="button button-light icon ion-ios-close maintainClear" ng-click="vm.mySelectClear1()"></a></span>
       </div>
	</div>

（2）controller上：

 /*
   * 可输入的下拉框（可筛选）
   * */
vm.mySelectFu1 = mySelectFu1;
vm.mySelectClear1 = mySelectClear1;
vm.myselectone1 = "";
vm.mytest1 = "";
// select切换事件（选取下拉框的数据将其值显示到input框）
function mySelectFu1(){
      document.getElementById("SGinputSelect1").value=vm.myselectone1;
      vm.data1.FLEET_CODE=document.getElementById("SGinputSelect1").value;
      vm.mytest1 = vm.myselectone1 //必须要有，否则第二次input框将不会显示
};
// 监听Input数据的变化(此时将可输入数据)
$scope.$watch('vm.mytest1',function(newValue,oldValue){
   if(vm.mytest1 != oldValue){
      document.getElementById("SGinputSelect1").value=vm.mytest1;
      vm.data1.FLEET_CODE=document.getElementById("SGinputSelect1").value;
    }
});
 // 清除select框的数据
function mySelectClear1(){
	document.getElementById("SGinputSelect1").value="";
	vm.data1.FLEET_CODE="";
	vm.mytest1 = "";
	vm.myselectone1 = ""
};

(3）css上：修改select默认样式

.inputTitle1{
  font-weight: bold;
  font-size: 14px;
  color: #5f5c5c
}
.SG-line-sel{
  /*用div的样式代替select的样式*/
  width: 100%;
  height: 32px;
  border-radius: 5px;
  /*盒子阴影修饰作用,自己随意*/
  box-shadow: 0 0 5px #ccc;
  position: relative;
}
select.SGinpuSelect{
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  height: 32px;
  line-height: 40px;
  /*隐藏select的下拉图标*/
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /*自定义箭头的样式，记得背景一定要加 白色或其他*/
  background:url("../img/xiala.png") no-repeat scroll right center #fff;
  background-size: 20px;
  /*ie下,原默认的箭头样式还是会显示，所以这里把自定义的样式给去除了*/
  background:#fff\9;
  color:#666;
  width:52%;
  position:relative;
  margin-left: 44%;
    /*通过padding-left的值让文字居中*/
  padding: 0 21%;
}
input#SGinputSelect1{
  position: absolute;
  left: 34%;
  top: 14px;
  width: 42%;
  height: 30px;
  background: rgb(255, 255, 255);
  border: none;
  padding-right: 2px;
  text-align: center;
}

（4）效果图：