Automatically load jquery autocomplete text box

Question

I am using jquery 1.8.2 and jqueryui 1.9.0.

I am trying to add the "Edit Entry" dialog to my table, which contains the jquery-ui autocomplete text box.

I also use the autocomplete change event to restrict the user to select items from this list.

My problem: when I show my edit form, I set the existing data in the text field, however, when the user clicks on another field in the edit form, the change controller that displays the error has not changed anything. I found many examples that show how to set a value for an auto component like combobox, but I could not find it for a text field type. Please help me in this matter, I believe that your answers will be useful for other users.

here is my code for the autocomplete text box:

$("#EditMaterialName").autocomplete({ source: function (request, response) { $.ajax({ type: "POST", url: "someurl", dataType: "json", data: { search_string: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item.description, value: item.description } })); } }); }, minLength: 2, select: function (event, ui) { }, change: function (event, ui) { if (!ui.item) { $('<div class="error"><b> please select a listed value.</b><div>').insertAfter('#EditMatName'); $('#EditMaterialName').val(''); } }, open: function () { $(this).removeClass('ui-corner-all').addClass('ui-corner-top'); }, close: function () { $(this).removeClass('ui-corner-top').addClass('ui-corner-all'); } }); 

and here is the code to display the Edit Record dialog:

 $('a.edit_link').live("click", function () { clearEditMaterialForm(); //loading selected value var valMaterialName = $(this).closest('tr').children('td.cl_material_name').text(); $('#EditMaterialName').val(valMaterialName); }); 

Thanks so much for your answers.

Answer 1

This is not beautiful, maybe it is not right, but it works:

 function setAutocompletCurrentValue(id, value) { $(id).val(value); var textToShow = $(id).find(":selected").text(); $(id).parent().find("span").find("input").val(textToShow); } 

Hope this helps.