在 jQuery 组合框上选择下拉项后触发事件

Trigger event once dropdown item is selected on jQuery combobox

本文关键字:事件 组合 jQuery 选择      更新时间:2023-09-26

我正在使用jQuery UI库中的自动完成组合框来创建几个也接受下拉列表的文本字段 - 基本上是混合文本/下拉列表输入。我对其进行了自定义,因此它也接受自由文本输入,而不仅仅是下拉数组中的项目。

当用户从下拉列表中选择一个项目时,我想触发一个函数,该函数根据输入填充表单的其余部分。我不希望当用户手动键入值时触发此功能。我不确定如何将事件专门绑定到从下拉列表中选择项目的用户。

这里有一个小提琴:http://jsfiddle.net/AhDHk/

.HTML:

    <input type="text" name="realtor-name" id="lp-realtor-name" value="" class="text ui-widget-content ui-corner-all" />

.JS:

// adds the dropdown, dropArray is the list of items for the dropdown, id is the ID of the html input. 
function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");

$("<button type='button'>&nbsp;</button>")                     
    .attr("tabIndex", -1)                     
    .attr("title", "Show All Items")                     
    .insertAfter($input)                     
    .button({                         
        icons: {                             
            primary: "ui-icon-triangle-1-s"                         
        },                         
        text: false                     
    })                     
    .removeClass("ui-corner-all")                     
    .addClass("ui-corner-right ui-button-icon lp-drop-button")   
    .click(function() {                         
        // close if already visible                         
        if ($input.autocomplete("widget").is(":visible")) { 
             $input.autocomplete( "close" );
             return;                         
        }                                              
        $(this).blur();                                                 
        $input.autocomplete("search", "" );                         
        $input.focus();                     
    });
$("form").submit(function(e) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    alert($(this).serialize());
});
}

以下是处理它的方法:

var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0,
    select: function(event, ui) { alert('test');}
}).addClass("ui-widget ui-widget-content ui-corner-left");

可能重复的: jQuery UI 自动完成选择

选择事件,在这里。

function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0,
    select:function(a,b){
          alert(b.item.value + 'selected');
    }
}).addClass("ui-widget ui-widget-content ui-corner-left");