本文主要记载如何实现可输入并通过过滤器，筛选下拉数据的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> <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）效果图：
