Javascript jQuery ui组合框添加多个搜索查询

Javascript jQuery ui组合框添加多个搜索查询,javascript,jquery,html,drop-down-menu,combobox,Javascript,Jquery,Html,Drop Down Menu,Combobox,我想有一个下拉列表,其中包含一个项目的多个搜索查询 我正在使用jQueryUI组合框 示例:在下拉列表中,您会看到“USD”,但如果您键入“dollar”,它也会显示“USD” <div class="ui-widget"> <label>Currency: </label> <select id="comboboxCurrency"> <option></option>

我想有一个下拉列表,其中包含一个项目的多个搜索查询

我正在使用jQueryUI组合框

示例:在下拉列表中,您会看到“USD”,但如果您键入“dollar”,它也会显示“USD”

 <div class="ui-widget">
      <label>Currency: </label>
      <select id="comboboxCurrency">
         <option></option>
         <option value"dollar">USD</option>
         <option label"dollar">EUR</option>
         <option>AUD</option>
         <option>BRL</option>
         <option>CAD</option>

货币:
美元
欧元
澳元
BRL
计算机辅助设计
我试过“值”和“标签”都不起作用


这里缺少什么?

我假设您正在使用创建下拉菜单的自定义ui

您可以修改
\u source
方法的
$。widget
工厂,这样它将根据选项值而不是选项文本进行搜索

_source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response(this.element.children("option").map(function() {
        // get text of the option
        var text = $(this).text();
        // get value of the option
        var value = $(this).val();
        // check is value is set and pass value to matcher.test() method
        if (this.value && (!request.term || matcher.test(value)))
          return {
            label: text,
            value: text,
            option: this
          };
      }));
    }
$(函数(){
$.widget(“custom.combobox”{
_创建:函数(){
this.wrapper=$(“”)
.addClass(“自定义组合框”)
.insertAfter(此.element);
this.element.hide();
这是。_createAutocomplete();
这是。_createShowAllButton();
},
_createAutocomplete:function(){
var selected=this.element.children(“:selected”),
value=selected.val()?selected.text():“”;
this.input=$(“”)
.appendTo(此.wrapper)
.val(值)
.attr(“标题”、“名称”)
.addClass(“自定义组合框输入ui小部件ui小部件内容ui状态默认ui左角”)
.自动完成({
延迟:0,
最小长度:0,
来源:$.proxy(此“\u来源”)
})
.工具提示({
课程:{
“ui工具提示”:“ui状态突出显示”
}
});
此。_on(this.input{
自动完成选择:功能(事件、用户界面){
ui.item.option.selected=true;
此._触发器(“选择”,事件{
项目:ui.item.option
});
},
AutoCompleteTechange:“\u RemoveFinValid”
});
},
_createShowAllButton:函数(){
var input=this.input,
wasOpen=false;
$("")
.attr(“tabIndex”,-1)
.attr(“标题”、“显示所有项目”)
.工具提示()
.appendTo(此.wrapper)
.按钮({
图标:{
主要:“ui-icon-triangle-1-s”
},
文本:false
})
.removeClass(“用户界面角全部”)
.addClass(“自定义组合框切换ui右角”)
.on(“mousedown”,function(){
wasOpen=input.autocomplete(“小部件”)是(“:可见”);
})
.on(“单击”,函数(){
输入。触发(“焦点”);
//如果已经可见,请关闭
如果(打开){
返回;
}
//将空字符串作为要搜索的值传递,显示所有结果
input.autocomplete(“搜索”和“);
});
},
_来源:功能(请求、响应){
var matcher=newregexp($.ui.autocomplete.escapeRegex(request.term),“i”);
响应(this.element.children(“option”).map(函数(){
var text=$(this.text();
var值=$(this.val();
if(this.value&(!request.term | | matcher.test(value)))
返回{
标签:文本,
值:文本,
选项:这个
};
}));
},
_RemoveFinValid:函数(事件,ui){
//已选择项目,无需执行任何操作
if(ui.item){
返回;
}
//搜索匹配项(不区分大小写)
var value=this.input.val(),
valueLowerCase=value.toLowerCase(),
有效=错误;
this.element.children(“option”).each(function(){
if($(this).text().toLowerCase()==valueLowerCase){
this.selected=valid=true;
返回false;
}
});
//找到一根火柴,没什么可做的
如果(有效){
返回;
}
//删除无效值
这是输入
.val(“”)
.attr(“标题”,值+“不匹配任何项目”)
.工具提示(“打开”);
this.element.val(“”);
这是延迟(函数(){
this.input.tooltip(“close”).attr(“title”,”);
}, 2500);
this.input.autocomplete(“实例”).term=“”;
},
_销毁:函数(){
this.wrapper.remove();
this.element.show();
}
});
$(“#combobox currency”).combobox();
});
。自定义组合框{
位置:相对位置;
显示:内联块;
}
.自定义组合框切换{
位置:绝对位置;
排名:0;
底部:0;
左边距:-1px;
填充:0;
}
.自定义组合框输入{
保证金:0;
填充物:5px10px;
}

货币:
美元
欧元
澳元
BRL
CAD