Search jQuery

jQuery Forum

Using jQuery UI

speedpack..

Programmatically set value/label on autocomplete

Answered

Need more info
Working on it
Answered

in Using jQuery UI • 12 years ago

Hi,

We have a what we call "relatedObjectWidget" which maps to a foreign key field in a database. This is currently implemented using an autocomplete based on prototype, which we would like to migrate to the jqueryUI one.

One of the features of the widget is that after the autocomplete text input, there is an icon/button which allows the user - if he has privileges of course - to create a new "related" object by a popup window. If the user submits the popup, both label and value are set on the autocomplete to the newly created one and the popup is closed.

this works great, but I seem to be missing a method to programmatically set the label and value on a jQueryUI autocomplete. Is this currently supported?

Thanks again for a wonderful framework :)

Replies(11)

speedpack..

Re: Programmatically set value/label on autocomplete

12 years ago

Hi - sorry for bumping this, but I still haven't found a way to do this. Can we update the label and value programmatically on the autocomplete?

rsinton

Re: Programmatically set value/label on autocomplete

12 years ago

The original label and input elements are still readily accessible after you create the autocomplete: you can just update them in the usual fashion.

Here's an example, based on the source code from the autocomplete documentation:

<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
$("#tags").autocomplete({
source: availableTags
});
$( '#change' ).click( function() {
$( '#tags' ).parent().find( 'label' ).text( 'New label:' );
$( '#tags' ).val( 'New value' );
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<button id="change">Change</button>
</body>
</html>

HTH,

Robert

speedpack..

Re: Programmatically set value/label on autocomplete

12 years ago

Hi!

Thanks for the feedback.
I understand that we can indeed set the input value as such, but with the label I didn't actually mean the label for the input field, but I was referring to the "display value" for the input field.

For instance: the drop down can show names as displayed values, but the underlying input field's value is the object ID for that name in the database...

So if we create a new person, and it is inserted into the database as "David" with new ID "123"; I want the underlying input's value to be "123" whereas the autocomplete should display "David" --> how to update "David"?

rsinton

Re: Programmatically set value/label on autocomplete

12 years ago

Sounds like we had some overlaying of terms there :-)

You're talking about the 'label' and 'value' element names used in the array of autocomplete source options when you're using the more advanced type of source array.

So are you asking, then, how to add the newly-created object as one of the autocomplete options, so that the user can pick the new person?

To achieve that, you need to first update your 'source' array of potential autocomplete candidates, by adding a new element that corresponds to the new person. This should be as simple as calling .push() if you are using a JavaScript array.

Next, call .autocomplete() again to reset the autocomplete input widget. I don't think you have to destroy or disable it first: just repeat the original call.

Now the new person is an autocomplete candidate. If you want to, you can also bring them up as the currently-selected option by changing the (HTML) value of the input field with a simple .val() call, and then calling .autocomplete( 'search' ).

HTH,

Robert

speedpack..

Re: Programmatically set value/label on autocomplete

12 years ago

Hi Robert,

thanks for the feedback - you are correct with what i want to achieve now.
Just understand however that the datasource is server-side json, and once the user says "add" on the child form, I don't want the autocomplete to go another round to the server - at that time I just want it to set the value and display the "label".

the source array is in fact automatically updated since it's serverside, and the form does in fact add it to the database...

so - I could indeed use the .autocomplete('search') option, but that would force the autocomplete to go to the server again, and this is just what I want to avoid, as I very well know what the user wants to select (he just added it!!!)

It would just not be as user friendly to force the user to go search for the person he just added :)

rsinton

Re: Programmatically set value/label on autocomplete

12 years ago

Referring back to your earlier comment, I don't think it's strictly correct to say that the autocomplete widget has an 'underlying' value (record key in your case) that persists and/or can be set. What happens is that when the user makes a selection, the widget passes you that value one time through the 'select' function that you supply. See the 'Custom data and display' example in the documentation for a good demonstration of this.

With that in mind, would the following steps have the desired result?

• Abstract out your select-person logic (i.e. what happens once a person is selected) into a separate function, called from the 'select' function in the .autocomplete() setup call.

• When the user creates a new related object, first set the 'label' (person's name in this case) into the input field with a simple .val() call.

• Then call the separate select-person function.

Here's some rough code (not checked) to demonstrate:

$( '#auto' ).autocomplete({
source: // whatever
select: function( event, ui ) { ChosenPerson( ui.item.value ); }
})
function ChosenPerson( RecordKey ) {
// Do the work required when a person (possibly a newly-created one) has been selected.
}
function NewPerson() {
// Runs as part of creating a new person record. When done:
ChosenPerson( RecordKey );
}

Cheers,

Robert

speedpack..

Re: Re: Programmatically set value/label on autocomplete

12 years ago

Hi Robert,

I'm sorry for not responding to you earlier - for some reason I don't always get notification mails when replies are being posted, which makes me look like an idiot that does not appreciate your feedback.

Well - I do appreciate your feedback :)

I see where you are going to, and perhaps it may work, but still I feel that if you have a value in the text box that is different from the displayed (I call it "translated") value, it should be possible to set both of them through the api. as that is what is happening when a user selects a value from the drop down.

I just want the user to see "David Heremans" and the form to submit the new object ID (123) to the server...

adrianaco..

Re: Programmatically set value/label on autocomplete

10 years ago

''speedpack..' did you find a solution to this? it's exaclly what i need now

Derek McL..

Re: Programmatically set value/label on autocomplete

8 years ago

I think I know what your problem is, your autosuggest text box wants to say 'Foobar' instead of '42', being the label and value respectively. Using $.('#mytextbox').val(something); doesn't seem to have any effect, nor $(this).val(something);

The answer is to set ui.item.value = 'whatever you want';

It sounds like you want ui.item.value = ui.item.label

You can also hack more variables in this way. Instead of (in my case, using PHP) sending a json array with label and value, set value as an array, then you can do this, setting the value to what you need afterwards:

select: function( event, ui ) {

var foo = ui.item.value.foo;

var bar = ui.item.value.bar;

var baz = ui.item.value.baz;

ui.item.value = foo;

}

Hope this helps :-)

Derek McL..