CODEWITHSUNDEEP
jqueryjquery-ui
s01ipsist
s01ipsist

Reputation: 3137

How do I reset the text visible with a jQuery Autocomplete combobox?

Using a jQuery Autocomplete combobox like on the demo

http://jqueryui.com/demos/autocomplete/#combobox

How do I reset the visible user-entered text using jQuery?

(after the user has entered some text, made an autocomplete choice and caused, an unrelated, change)

Note: Changing the underlying select element does not cause any change in the autocomplete input field.

Note 2: This is one of many autocomplete comboboxes on the page in question (unlike demo)

Upvotes: 1

Views: 5495

Answers (2)

Ricuzzo
Ricuzzo

Reputation: 1

If you want to clear the text in a comboBox (comboChild) that depends on another combo box, you do this in the "select:" event (triggered when parent combo box is changed):

//Creation of the parent combo:

$comboParent.combobox({
                      select: function( event, ui ) {

                             clearComboBoxText($("#combo2"));    
                      }
                  });


function clearComboBoxText(cmbBoxObj){
     var inputsDelBox = cmbBoxObj.next().children(); //ref to the combo editable 
     inputsDelBox.val(""); // this clears the text 
     //inputsDelBox.css( "background-color", "green" ); //if you want to change color

}

Upvotes: 0

Allen Tellez
Allen Tellez

Reputation: 1211

I am able to reset the demo with the following code. One thing to note is that the select box is hidden but the values need to be maintained.

//clear each option if its selected
$('#combobox option').each(function() { 
    $(this).removeAttr('selected')
});

//set the first option as selected
$('#combobox option:first').attr('selected', 'selected');

//set the text of the input field to the text of the first option
$('input.ui-autocomplete-input').val($('#combobox option:first').text());

Upvotes: 6

Related Questions