set value to jquery autocomplete combobox

Question

I am using jquery autocomplete combobox and 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.

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.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.

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

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");

Acme

what kind html? it look like <select><option value="1">lalala</option>...</select> – Acme

Answer 1

Is this demo what 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.

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'); 

Updated demo

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.

Hungry

Yes. This is right behavior but not complete. You should not forget call $("#combobox").val("Java"). Look at my edit for question. I found workaround. But i should not forget call trigger function, and it's uncomfortably. – Acme

OK, I think I understand. You are looking for a unobtrusive solution. I have added a new demo which might be better. – Hungry

yeh. This is what i looked for. Thank you wary much. – Acme

I don't know why, but I only get it worked as $( function () { $('#combobox').combobox('autocomplete', 'Java'); }); – Designer

Answer 2

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);

Intendancy

Answer 3

@andyb, i think rewrite:

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

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

Vibrate

var selected = this.element.children(":selected"); value = selected.val() ? selected.text() : ""; // it will get text value of the option which is selected for input value instead of value of the option – Vibrate

Answer 4

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).

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

• 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)

How Change method can be utlized:

$("#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.

Oogenesis

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');

});

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?

#

Attempt 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?

$(".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(",")}); 


    });
});

Birl

:) actually no. i want follow. if i cal $("#select").val("somevalue") ("somevalue" already exists in select options), input(element added with autocomplete) text changes too – Acme

:) user763228 look at answer by andyb He makes almost the right thing. – Acme