jquery实现带搜索的下拉框
jquery实现带搜索的下拉框
小白菜就不多说了，因为知之甚少。
这是hmtl的样式
* {margin:0;padding:0;}
.dropdown {display:inline-block;width:200px;height:28px;border:1px solid #808080;position:relative;}
.dropdown .editor {display:block;border:0;padding:0;width:100%;box-shadow: inset 1px 2px 3px #ddd;height:inherit;}
.dropdown .trigger {position:absolute;top:0;right:0;}
.dropdown ul {display:none;width:100%;z-index:1111;height:140px;padding:2px;position:absolute;top:100%;background-color:#FFF;border:1px solid #DDD;border-radius: 0 0 5px 5px;overflow-y:auto;overflow-x:hidden;}
.dropdown ul li {height:20px;display:block;font-size:12px;overflow:hidden;cursor:pointer;}
.dropdown ul li .hot {color: red;}
.dropdown ul li:hover {background-color: #EEE;}
.dropdown ul .search {display:block;backgound: url(imgs/search.gif) no-repeat scroll center right;border-bottom: 1px solid #808080;}
.dropdown ul .search:hover{background-color:#FFF;}
.dropdown ul .search input {padding:2px;width:100%;border:0;font-size:14px;background:none;}
国家/地区
上面的οninput=”“和onpropertychange=”“这个是关键，因为我的主要思路是在下拉列表中选择item之后，强制调用input的oninput方法，onpropertychange是为了在ie下也可以用（ 我测试的是ie8）。上面的是html。
(function(){
//当列表项被点击时，把列表项的值放在输入框里面，(“.dropdown”).delegate(“li”, “click”, function(e){
var v = (this).attr(“data−name”),drop= (this).closest(“.dropdown”);
var kv = $(this).attr("value");
if(kv == null || kv == ""){
kv ="null";
}
var msgDiv = $(this).parent().parent().find("input").eq(0).attr("name");
drops = $("[name='"+msgDiv+"']");
drops.attr("value", kv);
drops.attr("data-value", kv);
//这里强制调用input的oninput，onpropertychange方法
$("[name='"+msgDiv+"']").trigger('oninput');
$("[name='"+msgDiv+"']").trigger('onpropertychange');
drop.attr("value", kv);
drop.attr("data-name", v);
drop.find(".editor").val(v);
$(this).parent().hide();
e.stopPropagation();
}).delegate(".editor", "click", function(e){ //当下拉按钮被点击时，显示数据列表
$(this).closest(".dropdown").find("ul").show();
e.stopPropagation(); //阻止冒泡，因为冒泡到 document 的时候，会隐藏列表
}).delegate(".search input", "click", function(e){
e.stopPropagation();
}).delegate(".search input", "keyup", function(e){ //当检测到列表中的输入框的时候，启动过滤，不满足的项隐藏
var v = $.trim(this.value), list = $(this).closest("ul").children("li");
if(v == "") { //特殊情况，过滤输入框中没有值的时候迭代所有的列表项并显示它们
list.each(function(){
if(this.className.indexOf("search") != -1) {return;}//不考虑过滤输入框所在的列表项
$(this).text(this.innerText || this.textContent).show();
});
} else {
list.each(function(){ //迭代列表，
if(this.className.indexOf("search") != -1) {return;} //不考虑过滤输入框所在的列表项
var lv = $(this).text(); //列表的文本
if(lv.indexOf(v) === -1) { //不匹配过滤文本，就隐藏
$(this).hide();
} else { //匹配，把匹配的文本替换会含有标记的文本（红色）
$(this).html(lv.replace(v, ''+v+'')).show();
}
});
}
});
$(this).click(function(){
//当数据列表在显示时，如果点击了页面其它区域，则隐藏列表
$(".dropdown ul:visible").hide();
});
$(".editor").click(function (e){
var url = e.target.getAttribute("data-read-url");
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');
var json = eval(tt);
var p = $(".dropdown ul");
$('ul>#contentdrop').remove();
var fragment = document.createDocumentFragment(), li;//数组
$.each(json, function (index, item) {
//循环获取数据
var itemKey = json[index].itemKey;
var itemName = json[index].itemName;
li = document.createElement("li");
li.setAttribute("value", itemKey);
li.setAttribute("data-name", itemName);
li.setAttribute("id", "contentdrop");
li.innerHTML = itemName;
fragment.appendChild(li);
});
p.append(fragment);
}
});
});
input的oninput，onpropertychange方法我写在全局的js中
var elVal;
$(“[data-bind=’birthplace’]”).bind(‘oninput onpropertychange’, function(e) {
if (role == ‘datepicker’) {
elVal = $(e.currentTarget).datepicker("getDate");
that.inputForm.formData[paramName] = elVal;
}else{
//下面两行就是把改变后的值赋值给form表单用于保存
elVal = $(e.target)[0].getAttribute("value");
that.inputForm.formData[paramName] = elVal;
var onchange = el.data("onchange")
if (onchange) {
that.inputForm[onchange](e);
}
}
if (elVal) {
var msgDiv = el.closest("td").find("div").eq(1);
msgDiv.remove();
}
});
基本思路就是
1.在 select点击的时候给input attr 加属性和值
2.然后trigger调用oninput，onpropertychange方法（注意，我是必须在我的html的input中加入 οninput=”” onpropertychange=”“），如果没加就调用不到.bind(‘oninput onpropertychange’, function(e)这个方法。
3.在bind(‘oninput onpropertychange’, function(e)这个方法中改变form的值。
4.在页面的初始化的时候我重新调用url取得value和key的对应值 因为我保存的是编码
if(role==’inoutcombobox’){
var k = value;
var url = el.data(“read-url”);
if (url) {
$.get(url,function(res){
if (res) {
for( var m in res) {
//console.log(res[m].itemKey);
if(res[m].itemKey == k){
el.val(res[m].itemName);
}
//遍历对象，k即为key，obj[k]为当前k对应的值
}
}
});
}
}
5.以上是大致思路，每个人的框架代码不同，最终解决方案很难从网上找到匹配度高的，给个思路和方法自己尝试。