JQuery UI Autcomplete заменяет ярлык со значением по выбору

Question

Я использую автозаполнение JQuery UI с текстовым полем ASP.NET, чтобы заполнить метку, а также значение. Вот где я отображать данные из вызова Ajax:

success: function (data) { 
    response($.map(data, function (item) { 
     return { 
      label: item.label, 
      value: item.value 
     } 
    })); 
} 

Этикетка является текстом, значение представляет собой число, используемое для идентификации этой строки. Моя проблема заключается в том, когда пользователь выбирает параметр, текстовое поле заменяет метку значением. Поэтому, если они выбирают «Джон Смит», текстовое поле меняется с «Джон Смит» на «1234» и т. Д. Как я могу манипулировать событием select, чтобы оставить текст в текстовом поле? Любая помощь приветствуется. Благодаря!

Вот более полное представление о моей странице ASPX:

<div class="ui-widget"> 
     <asp:TextBox ID="txbSearchKeyword" runat="server" Columns="50" /> 
    </div> 
    <asp:HiddenField ID="selectedRecordId" runat="server" /> 

и Jquery:

(function() { 
    $("#txbSearchKeyword").autocomplete 
    ({ 
     source: 
      function (request, response) { 
       $.ajax({ 
        type: "POST", 
        url: "AutoComplete.asmx/GetAutoCompleteList", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ keywordStartsWith: request.term }), 
        dataType: "json", 
        success: function (data) { 
         response($.map(data.d, function (item) { 
          return { 
           label: item.label, 
           value: item.value 
          } 
         })); 
        } 
       }); 
      }, 
     minLength: 2 
    }); 

    $("#txbSearchKeyword").autocomplete 
    ({ 
     select: function (event, ui) { 
      $('#selectedRecordId').val(ui.item.value); 
      DoSomethingwithdataAJAXfunction(ui.item.value); 
     } 
    }); 
})(); 

Answer 1

Возможно, некоторые из этого фрагмента кода поможет вам:

select: function(event, ui) { 
    var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null); 
    if (hasValue) { 
     var focusedElement = $(this); 
     focusedElement.val(ui.item.label); 
     return false; 
    } 
    else { 
     return false; 
    } 
}, 
focus: function(event, ui) { 
    return false; // return "true" will put the value (label) from the selection in the field used to type 
}, 

Как в сторону, я не знаю, почему у вас есть вещи, отделенные когда:

minLength: 2 
}); 
    $("#txbSearchKeyword").autocomplete 
({ 
    select:... 

может быть просто:

minLength: 2, 
select:... 

Answer 2

value является переменной, которая будет отображаться в текстовом поле.

Так что вам нужно его изменить. label: item.value, value: item.label :)

Answer 3

im Предполагая, что вы хотите, чтобы элемент был выбран в

ID="txbSearchKeyword" 

это текстовое поле?

попробуйте добавить это к вашему автозаполнения:

({ 
    select: function (event, ui) { 

    //add this --> $('#txbSearchKeyword').val(ui.item.label); 
     $('#selectedRecordId').val(ui.item.value); 
     DoSomethingwithdataAJAXfunction(ui.item.value); 
    } 
}); 

линии можно попытаться добавить в комментариях. У меня была такая же проблема сегодня, и это сработало для меня.