可输入可筛选的select下拉框

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

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

请选择：

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

参考普通js实现方法：

      
       
             m3/s
             mm
             ℃
             KV
        
          
     

 

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

	

       

         
         车队名称： 
         

           
             
             {
    {item.FLEET_CODE}} ---- {
    {item.FLEET_NAME}}
           
         
         
         
       
	

（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）效果图：