Jquery自動完成在兩個文本框中選擇值拆分

我正在尋找將從兩個不同文本框中的jQuery自動完成下拉列表中選擇項目拆分的功能。Jquery自動完成在兩個文本框中選擇值拆分

到目前爲止，我試過這是不工作的情況如下：

$(".autocomplete").autocomplete({ 
    source: function (request, response) { 
    var param = { LocKeyword: $('[id*=txtCity]').val() }; 
    $.ajax({ 
     url: "/UPSLocator.aspx/GetQueryData", 
     data: JSON.stringify(param), 
     dataType: "json", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataFilter: function (data) { 
     return data; 
     }, 
     success: function (data) { 
     response($.map(data.d, function (item) { 
      return { 
      value: item 
      } 
     })) 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
     var err = eval("(" + XMLHttpRequest.responseText + ")"); 
     alert(err.Message) 
     // console.log("Ajax Error!"); 
     } 
    }); 
    }, 
    select: function (event, ui) { 
    var SelectedVal = ui.item.value; 

    alert(SelectedVal); 
    debugger; 
    var array = SelectedVal.split(',') 
    $('[id*=txtCity]').val(array[0]); 
    $('[id*=txtState]').val(array[1]); 
    }, 
    minLength: 6 //This is the Char length of inputTextBox 
});

我只得到以下從上面的代碼片段響應。

{city, state}

我能設定值state但城市文本框設置爲城市，州這不是分裂。

來源

2017-08-18 Omkar Mhaiskar

您可以發佈從阿賈克斯返回的數據？ –

是的，我正在向後端代碼發送搜索文本並從服務中獲取數據。我可以根據需要獲取數據。但無法在兩個不同的文本框之間拆分獲取的數據。在選擇：我分裂的數據，但它又重新設置爲第一個文本框顯示城市和國家的組合，而不是隻有城市。 –

明白了，您可以發送一個返回的數據{city，state}的示例來創建小提琴，如果您將html放在一起也不錯。 –

您是否有權操作數據？

的autocomplete插件預計JSON對象與label和value特性的陣列（儘管如果只指定value，它將被用作標籤）。因此，在簡單的情況下，你可以返回數據，看起來像這樣：

[ 
    { state: 'Texas', city: 'San Antonio' }, 
    { state: 'Texas', city: 'Dallas' }, 
    { state: 'Texas', city: 'Austin' } 
] 

select: function(event, ui) { 
    $("#txtState").val(ui.item.state);  
    $("#txtCity").val(ui.item.city); 
}

存在與另一數據的例子：

https://jsfiddle.net/dabc61ma/1/

來源

2017-08-22 11:51:25

@Mike McCaughan感謝支持這麼久。我正在嘗試根據您的建議填充數據。但它仍然像耳毛一樣工作。就像我能夠加載城市文本框中的值一樣，因爲它來自響應。不分裂在兩個文本框中。就像你的小提琴示例「Little，Grebe」一樣，這是我選定的值，它在城市文本框中顯示爲「Little，Grebe」。不像預期的城市文本框與Grebe填充小文本和狀態文本框。只是想知道它是可行的。 –

感謝支持這麼久。我發現select事件在autocomplete實際設置輸入值之前運行，所以whenevent處理程序設置該值，它幾乎立即被覆蓋。所以設置下面的代碼。 select：function（e，i）setTimeout（function（）{var SelectVal = i.item。值; var array = SelectVal.split（'，'）$（'[id * = txtCity]'）.val（array [0]）; $（'[id * = txtState]'）.val（array [1 ]）; }，0）; }，現在按預期工作。 –

Jquery自動完成在兩個文本框中選擇值拆分

回答

相關問題