JQuery UI自動完成替換標籤的值選擇

我正在使用JQuery UI自動填充與ASP.NET文本框來填充標籤以及值。這裏是我從ajax調用映射數據的地方：JQuery UI自動完成替換標籤的值選擇

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

標籤是文本，值是用於標識該行的數字。我的問題是，當用戶選擇一個選項時，文本框將用該值替換標籤。因此，如果他們選擇'John Smith'，那麼文本框會從'John Smith'更改爲'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); 
     } 
    }); 
})();

來源

2012-04-19 Drew

你可以發佈剩餘的jQuery和一些HTML嗎？沒有看到所有的代碼就很難排除故障。 – 2012-04-19 16:06:17

沒問題！請參閱我的編輯。 – Drew 2012-04-19 16:45:53

也許有些這個片段將幫助您：

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:...

來源

2012-04-19 16:55:14

正是我需要的，謝謝！我不知道我可以用那種方式使用焦點事件。並感謝其他改進！ – Drew 2012-04-19 18:25:15

value是將顯示在文本字段變量。

所以你需要改變它。 label: item.value, value: item.label :)

來源

2012-04-19 16:08:42 WolvDev

感謝您的回覆！但這並不能幫助我，因爲標籤是自動完成建議列表中顯示的內容。所以我的下拉菜單會顯示所有的ID號碼。 – Drew 2012-04-19 16:41:30

即時假設您想要選中的項目出現在

ID="txbSearchKeyword"

this textbox？

嘗試添加了此信息自動完成：

({ 
    select: function (event, ui) { 

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

你可以嘗試添加該行是註釋。我今天遇到了同樣的問題，並且爲我工作。

來源

2012-04-19 18:28:51 Thousand

JQuery UI自動完成替換標籤的值選擇

回答

相關問題