Javascript 将值设置为 jquery 自动完成组合框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6197664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set value to jquery autocomplete combobox
提问by xandox
I am using jquery autocomplete comboboxand everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue")and it set to select element, but no changes in input element with autocomplete.
我正在使用jquery 自动完成组合框，一切正常。但我也想通过 JavaScript 设置特定的值，$("#value").val("somevalue")并将其设置为选择元素，但输入元素没有更改并具有自动完成功能。
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.elementlike this.element.bind("change", function(){alert(1)})but it was no effects. And I don't know why.
当然，我可以直接选择这个输入并设置值，但是还有其他方法可以做到吗？我尝试将绑定设置为this.element喜欢，this.element.bind("change", function(){alert(1)})但没有任何效果。我不知道为什么。
Edit
编辑
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
我找到了解决这种情况的方法。但我不喜欢。我已将以下代码添加到 ui.combobox 的 _create 函数
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");
当我需要更改我可以使用的值时 $("#selector").val("specificvalue").trigger("change");
回答by andyb
Is this demowhat you are looking for?
难道这个演示，你在找什么？
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
该链接将 jQuery UI 自动完成的值设置为Java。焦点留在输入上，以便可以使用普通键盘事件来导航选项。
Edit:How about adding another function to the combobox like this:
编辑：如何向组合框添加另一个函数，如下所示：
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
并使用您要设置的值调用它：
$('#combobox').combobox('autocomplete', 'Java');
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.
我找不到任何可用的现有功能来做你想做的事，但这对我来说似乎很好用。希望它更接近您需要的行为。
回答by seanfitzg
I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
我管理了一种快速而肮脏的设置值的方法。但是，您确实需要知道要在下拉列表中显示的项目的值和文本。
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);
回答by nthaih
@andyb, i think rewrite:
@andyb，我想重写：
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}
回答by Justin Fentress
I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
我真的很喜欢 andyb 所做的，但我需要它在事件处理方面做更多的事情，以便能够处理触发更改事件，因为“selected”在点击 Enter 或失去对输入的关注时无法处理（点击 Tab 或鼠标点击）。
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
因此，使用 andyb 作为基础以及最新版本的 jQuery Autocomplete 脚本，我创建了以下解决方案：DEMO
- Enter:Chooses the first item if menu is visible
- Focus Lost:Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
- Enter：如果菜单可见，则选择第一项
- 焦点丢失：部分匹配触发未找到消息并清除条目（jQuery UI），但完全输入的答案“选择”该值（不区分大小写）
How Change method can be utlized:
如何使用 Change 方法：
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.
希望这可以帮助其他需要额外更改事件功能来弥补“选定”空白的人。
回答by John
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
这是一个工作示例和jquery，我假设您想更改选择的值，更改其文本外观并在页面加载时选择它？
#Attempt 2:
尝试 2：
here is another fiddle: http://jsfiddle.net/HafLW/1/, do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
这是另一个小提琴：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(",")});
});
});
