2013-09-07 5 views
7

Ich benutze jquery 1.8.2 und jqueryui 1.9.0 Bibliotheken.jquery Autocomplete Textfeld Wert programmgesteuert

Ich versuche, einen "Datensatz bearbeiten" -Dialog zu meiner Tabelle hinzuzufügen, die eine Autocomplete-Textbox von jquery-ui enthält.

Ich verwende auch das Änderungsereignis der automatischen Vervollständigung, um den Benutzer für die Auswahl der Elemente aus der angegebenen Liste einzuschränken.

Mein Problem ist: wenn ich mein Bearbeitungsformular zeige, setze ich die vorhandenen Daten in das Textfeld, aber wenn Benutzer auf ein anderes Feld im Bearbeitungsformular klickt, änderte der Change Controller den Fehler von nichts. Ich habe viele Beispiele gefunden, die zeigen, wie man den Wert für die automatische Vervollständigung des Combobox-Typs einstellt, aber ich konnte keinen für den Textbox-Typ finden. Bitte helfen Sie mir zu diesem Thema, ich glaube, dass Ihre Antworten auch für andere Benutzer nützlich sein werden.

hier ist mein Code für die automatische Vervollständigung Textbox:

$("#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'); 

     } 
    }); 

und hier ist der Code für die Ansicht Datensatz bearbeiten 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); 

    }); 

Vielen Dank für Ihre Antworten.

Antwort

9

Es ist nicht schön, vielleicht ist es nicht richtig, aber es funktioniert:

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

Hoffe, es hilft.

+0

Es ist so lustig und funktioniert gut, Wirklich danke Alter ... – Ali

+0

Perfekt. Funktioniert super. –

+0

Großer Dank fing an, meine Haare rauszuziehen, das funktioniert immer noch. – jared