一.背景
对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！so，为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，但我们用的是Angularjs,更希望用双向绑定，指令的方式优雅地解决这个问题。
分析：
标签上新加一个属性 select-search就能支持查找的功能。如果这个属性没起作用，也不影响原来的select的功能。1.在selectSearch指令里，怎么获取到ng-options里的数据源，以及指定的value（option标签的value）和text(option标签里的text)字段名。
2.用什么方式来筛选？是每次显示匹配项，隐藏不匹配项还是毎次从数据源里匹配，重新生成结点。
1.参考angular自带指令ng-options来获取数据源和value,text字段名。
特别说明，仅支持ng-options="obj.value as obj.text for objin list"的普通形式，那些带分组的等等，暂不支持哈。
2.重新生成结点。（为什么这么选择，方便呀！）
二.具体实现
1.代码部分
1.1 js代码(请引先引入jquery，不然会报错)
rush:js;">
/**
* 带筛选
功能的下拉框
* 使用
方法
'<div class="chose-drop chose-hide j-drop">' +
'<div class="chose-search">' +
'<input class="j-key" type="text" autocomplete="off">' +
'' +
'<ul class="chose-result">' +
// '{{'+ valueTempl+'}}'+
'' +
'' +
'',link: {
pre: function selectSearchPreLink(scope,attr,ctrls) {
var tmplNode = $(this.template).f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t();
var modelName = attr.ngModel,name = attr.name? attr.name:('def'+Date.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>());
tmplNode.attr('id',name + '_chosecontianer');
$animate.enter(tmplNode,element.parent(),element);
},post: function selectSearchPostLink(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e,ctrls) {
var choseNode = element.next(); //$('#'+attr.name +'_chosecontianer');
choseNode.addClass(attr.class);
element.addClass('chose-hide');
// 当前选中项
var ngModelCtrl = ctrls[0];
if (!ngModelCtrl || !attr.name) return;
par<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ptions(attr.ngOptions,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e);
var rs = {};
function setView() {
var currentKey = ngModelCtrl.$modelValue;
if (isNaN(currentKey) || !currentKey) {
currentKey = '';
choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text('请选择');
choseNode.find('i').addClass('chose-hide');
}
if ((currentKey + '').length > 0) {
for (var i = 0,l = rs.idArray.length; i < l; i++) {
if (rs.idArray[i] == currentKey) {
choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text(rs.labelArray[i]);
choseNode.find('i').removeClass('chose-hide');
break;
}
}
}
}
function setViewAndData() {
if (!s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.options) {
return;
}
rs = s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.options;
setView();
}
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$watchCollection('options',setViewAndData);
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$watch(attr.ngModel,setView);
function getListNodes(value) {
var nodes = [];
value = $.trim(value);
for (var i = 0,l = rs.labelArray.length; i < l; i++) {
if (rs.labelArray[i].indexOf(value) > -1) {
nodes.push($('<li>').data('id',rs.idArray[i]).text(rs.labelArray[i]))
}
}
return nodes;
}
choseNode.on('keyup','.j-key',function() {
// <a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>输入框keyup，重新筛选列表
var value = $(this).val();
choseNode.find('ul:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').empty().append(getListNodes(value));
return false;
}).on('click',function() {
choseNode.find('.j-drop').removeClass('chose-hide');
if (choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text() != '请选择') {
choseNode.find('i').removeClass('chose-hide');
}
choseNode.find('ul:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').empty().append(getListNodes(choseNode.find('.j-key').val()));
return false;
}).on('click','ul>li',function() {
var _this = $(this);
ngModelCtrl.$setViewValue(_this.data('id'));
ngModelCtrl.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a>();
choseNode.find('.j-drop').addClass('chose-hide');
return false;
}).on('click','i',function() {
ngModelCtrl.$setViewValue('');
ngModelCtrl.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a>();
choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text('请选择');
return false;
});
$(document).on("click",function() {
$('.j-drop').addClass('chose-hide');
choseNode.find('i').addClass('chose-hide');
return false;
});
}
}
};
})
1.2 css代码(用less写的，以下是编译后的)
rush:css;">
.chose-hide {
position: absolute!important;
top: -999em !important;
}
.chose-container {
border: none!important;
float: left;
margin-right: 40px;
padding: 0!important;
position: relative;
}
.chose-container .chose-single {
padding: 6px 12px;
color: #333;
width: 100%;
border: 1px solid #eee;
display: inline-block;
height: 30px;
}
.chose-container .chose-single::after {
content: '';
position: absolute;
border-width: 6px 3px;
border-style: solid;
/* border-top-color: transparent; */
border-left-color: transparent;
border-right-color: transparent;
border-b
ottom-color: transparent;
right: 8px;
top: 12px;
}
.chose-container .chose-single i {
width: 12px;
float: right;
right: 8px;
font-size: 12px;
height: 12px;
background-color: #eee;
}
.chose-container .chose-drop {
width: 195px;
position: absolute;
border: 1px solid #eee;
z-index: 1000;
background-color: #fff;
}
.chose-container .chose-search input[type='text'] {
margin: 0;
padding-left: 12px;
width: 100%;
height: 30px;
border: 1px solid #ccc;
float: none;
}
.chose-container .chose-result {
max-height: 370px;
overflow-y: scroll;
overflow-x: hidden;
}
.chose-container .chose-result li {
padding: 5px 12px;
list-style-type: none;
}
.chose-container .chose-result li:hover {
background-color: #e1e2e7;
}
1.3 使用及效果
rush:xhtml;">
2.详细说明
程序中的关键点是parSEOptions函数，即前面分析里的问题1。parSEOptions是参考ng-options的源码实现的，原来是想返回一个对象，这个对象里包含了数据源，但是在调试时，发现post函数中该函数返回对象里的数据为空，watch不到，所以改为用scope.options来存数据。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
