将值设置为 jquery 自动完成组合框

Question

我正在使用jquery autocomplete combobox 一切都很好。但我也想通过 JavaScript 设置特定的值，比如$("#value").val("somevalue")，它设置为选择元素，但输入元素没有自动完成的变化。

当然，我可以直接选择这个输入并设置值，但是还有其他方法吗？我尝试将绑定设置为this.element，如this.element.bind("change", function(){alert(1)})，但没有效果。我不知道为什么。

编辑

我找到了解决这种情况的方法。但我不喜欢它。我已将以下代码添加到 ui.combobox 的 _create 函数中

this.element.bind("change", function() {  
    input.val( $(select).find("option:selected").text());  
});

当我需要更改值时，我可以使用$("#selector").val("specificvalue").trigger("change");

Answer 1

我采用了一种快速而肮脏的方式来设置值。但是，您确实需要知道要在下拉列表中显示的项目的值和文本。

var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);

Answer 2

this demo 是您要找的吗？

该链接将 jQuery UI 自动完成的值设置为 Java。焦点留在输入上，以便可以使用普通键盘事件来导航选项。

编辑：像这样向组合框添加另一个函数怎么样：

autocomplete : function(value) {
    this.element.val(value);
    this.input.val(value);
}

并使用您要设置的值调用它：

$('#combobox').combobox('autocomplete', 'Java'); 

Updated demo

我找不到任何可用的现有功能来做你想做的事，但这对我来说似乎很好用。希望它更接近您需要的行为。

Answer 3

@andyb, 我认为重写：

    autocomplete: function (value) {
        this.element.val(value);

        var selected = this.element.children(":selected"),
                value = selected.val() ? selected.text() : "";
        this.input.val(value);
    }

Answer 4

我真的很喜欢 andyb 所做的事情，但我需要它在事件处理方面做更多的事情，以便能够处理触发更改事件，因为“选择”在按下输入或失去对输入的焦点时无法处理（点击标签或鼠标点击）。

因此，使用 andyb 所做的作为基础以及最新版本的 jQuery Autocomplete 脚本，我创建了以下解决方案：DEMO

• Enter：如果菜单可见，则选择第一项
• Focus Lost：部分匹配触发未找到消息并清除条目（jQuery UI），但完全输入的答案“选择”该值（不区分大小写）

如何使用 Change 方法：

$("#combobox").combobox({
    selected: function (event, ui) {
        $("#output").text("Selected Event >>> " + $("#combobox").val());
    }
})
.change(function (e) {
    $("#output").text("Change Event >>> " + $("#combobox").val());
});

希望这有助于其他需要额外更改事件功能以弥补“选定”留下的空白的人。

Answer 5

http://jsfiddle.net/nhJDd/

$(".document").ready(function(){
    $("select option:eq(1)").val("someNewVal");
    $("select option:eq(1)").text("Another Val");
    $("select option:eq(1)").attr('selected', 'selected');

});

这是一个工作示例和 jquery，我假设您想更改选择的值、更改其文本面并在页面加载时选择它？

#

尝试 2：

这里是另一个小提琴：http://jsfiddle.net/HafLW/1/，你的意思是你选择一个选项，然后你想将该值附加到输入区域的自动完成？

$(".document").ready(function(){
     someString = "this,that";
        $("input").autocomplete({source: someString.split(",")}); 

    $("select").change(function(){
        alert($(this).val()+" appended");
someString = someString+","+$(this).val();
        $("input").autocomplete({source: someString.split(",")}); 


    });
});