I have a textbox where the user puts in some text, and a dropdown appears. When the user selects something from the dropdown list, the text from the dropdown replaces the text that they typed.

Now, I want this textbox to clear itself if they didn't select anything from the dropdown.

So basically, the only text that can appear in the textbox is something that was ultimately selected from the dropdown. How would I achieve this?

I've tried:

  jQuery("#" + field).focusout(function() {
    jQuery("#" + field).val("");

  });

But this still clears even if they selected from the dropdown. What logic would I implement to do this? Could I set a variable or something that is set to true when they select from a list. I would then check this on the focusout function?

Quite new to JQuery!

I have a textbox where the user puts in some text, and a dropdown appears. When the user selects something from the dropdown list, the text from the dropdown replaces the text that they typed.

Now, I want this textbox to clear itself if they didn't select anything from the dropdown.

So basically, the only text that can appear in the textbox is something that was ultimately selected from the dropdown. How would I achieve this?

I've tried:

  jQuery("#" + field).focusout(function() {
    jQuery("#" + field).val("");

  });

But this still clears even if they selected from the dropdown. What logic would I implement to do this? Could I set a variable or something that is set to true when they select from a list. I would then check this on the focusout function?

Quite new to JQuery!

• javascript
• jquery
• autoplete
• jquery-ui-autoplete

• If you need the user to ONLY select values from a list why can you not use a bobox? (boboxes can support typing to jump to items) – g7876413 Commented May 7, 2013 at 12:15
• Did you implement the autoplete yourself or are you using a library? – andyb Commented May 7, 2013 at 12:16
• Because the lookup is dynamic through an AJAX call. – Lock Commented May 7, 2013 at 12:16
• 1 @andyb- I used the Jquery UI autoplete method for this. – Lock Commented May 7, 2013 at 12:16
• "set a variable or something that is set to true when they select from a list" - There is a possibility user can modify after select from autoplete. So, I guess, during Change (or) focusout, just trigger ajax call to check the text is valid, if not clear it. Hope, this helps. – sathish Commented May 7, 2013 at 12:23

2 Answers 2

Use the autoplete change event, check for the existence of ui (the item selected from the menu, if any. Otherwise the property is null), if it doesn't exist, then you know the user didn't select an autoplete option, and you can empty the value:

change: function (ev, ui) {
    if (!ui.item) {
        $(this).val('');
    }
}

Here's a simple demo fiddle

Possibly something like this:

jQuery("#" + field).focusout(function() {
    var enteredValue = $("#" + field).val();
    var listOfAvailableOptions = //put method call here
    if($inArray(enteredValue, listOfAvailableOptions)) //possibly use IndexOf() here and check if = -1
{
    jQuery("#" + field).val("");

}
});

The neater way would be to populate the values of a bo box from the AJAX call though