jQuery自動完成 - 左鍵點擊不點火選擇事件

嗨那裏。我已經搜索並溢出，但沒有找到答案。也許這是因爲我只是在使用jQuery/javascript的專業知識。

jQuery的 - 1.6.3
jQuery用戶界面 - 16年1月8日

測試在Firefox 7.0.1

我的選擇有一個簡單的console.log（）語句自動完成通話的事件。鍵盤輸入觸發它。鼠標左鍵單擊不會。

我不認爲這是關於正確使用ui.item.value（因爲這裏有其他問題），但很高興誤會。

如果有人能幫助它將不勝感激。

代碼：

<script type="text/javascript"> 
$(function() { 
    $("#fieldname").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
    url: "feed.webservice?term=" + request.term, 
    dataType: "xml", 
    success: function(xml) { 
     var data = $("record",xml).map(function() { 
     return { 
     id: $("id", this).text(), 
     label: $("label", this).text(), 
     value: $("value", this).text() 
     }; 
     }); 
     response(data); 
    } 
    }); 
    }, 
    minLength: 3, 
    select: function(event, ui) { 
    console.log("User selected: " + ui.item.value); 
    } 
    }); 
}); 
</script>

據透露，該代碼檢索XML飼料大概可以使用一些清洗，但目前這一切似乎工作沒關係。除非那裏有東西在用鼠標選擇。

XML代碼示例：

<records> 
<record><id>3566</id><label>1 Belmore Road</label><value>1 Belmore Road</value></record> 
<record><id>9053</id><label>1 Chalmers Street, Belmore</label><value>1 Chalmers Street, Belmore</value></record> 
<record><id>9872</id><label>1 Dinora Street, Belmore</label><value>1 Dinora Street, Belmore</value></record> 
<record><id>8717</id><label>1 Norma Avenue, Belmore</label><value>1 Norma Avenue, Belmore</value></record> 
<record><id>8776</id><label>1/107A Belmore Road, Peakhurst</label><value>1/107A Belmore Road, Peakhurst</value></record> 
<record><id>2326</id><label>1/109 Belmore Road, Peakhurst</label><value>1/109 Belmore Road, Peakhurst</value></record> 
<record><id>6026</id><label>1/17 Drummond Street, Belmore</label><value>1/17 Drummond Street, Belmore</value></record> 
<record><id>6346</id><label>1/221-223 Belmore Road South Road, Riverwood</label><value>1/221-223 Belmore Road South Road, Riverwood</value></record> 
<record><id>8038</id><label>1/33 Anderson Street, Belmore</label><value>1/33 Anderson Street, Belmore</value></record> 
<record><id>1831</id><label>1/38 Sharp, Belmore</label><value>1/38 Sharp, Belmore</value></record> 
<record><id>8711</id><label>1/40 Yangoora Road, Belmore</label><value>1/40 Yangoora Road, Belmore</value></record> 
<record><id>1837</id><label>1/5 Allan, Belmore</label><value>1/5 Allan, Belmore</value></record> 
<record><id>8241</id><label>1/50 Albert Street, Belmore</label><value>1/50 Albert Street, Belmore</value></record> 
<record><id>5315</id><label>1/58 Belmore Road</label><value>1/58 Belmore Road</value></record> 
<record><id>5317</id><label>1/58 Belmore Road, Peakhurst</label><value>1/58 Belmore Road, Peakhurst</value></record> 
<record><id>4232</id><label>1/65 Lucerne Street, Belmore</label><value>1/65 Lucerne Street, Belmore</value></record> 
<record><id>1988</id><label>1/65 Lucerne, Belmore</label><value>1/65 Lucerne, Belmore</value></record> 
<record><id>9129</id><label>1/7 Allan Avenue, Belmore</label><value>1/7 Allan Avenue, Belmore</value></record> 
<record><id>8236</id><label>1/7 Anderson Street, Belmore</label><value>1/7 Anderson Street, Belmore</value></record> 
<record><id>1836</id><label>10/33 Paxton, Belmore</label><value>10/33 Paxton, Belmore</value></record> 
</records>

來源

2011-11-01 Stu Andrews

你能發表您的XML樣本任何機會？ –

當然，沒問題。來了。 –

你能在這個例子中重現你的問題嗎？ http://jsfiddle.net/NXkWs/另外，當問題發生時，你會看到'input'元素中的值被更新了嗎？ –

因爲這個minLength: 3 的當您使用的minLength，這意味着你必須至少輸入該數字字符的顯示自動完成列表所以嘗試：minLength: 0

來源

2011-11-01 02:25:19

在Andrew上面的jsfiddle鏈接中，添加minLength：3不會導致問題。我會嘗試minLength：0。 –

是的，minLength設置似乎對此問題沒有任何影響。但感謝您的答案。 –

我發現了一種方法來做到這一點，但它只適用於第一個焦點，如果焦點丟失並再次獲得，它不會工作:( 但我發現這一個，還沒有檢查，希望它會工作 http://www.edwardotis.net/tech/?p=158 –

我不確定這是否是「答案」。如果我做錯了，請告訴我。

我決定通過使用「焦點」選項並分配一個函數來設置背景中的值（通過web服務）來解決問題。

這是一個真正的黑客，但它的工作原理。

focus: function(event, ui) { 
    jQuery.ajax({ 
    type: "POST", 
    url: "set-value.snips", 
    data: "name="+ui.item.value+"aannddvvaalluuee="+ui.item.id+"aannddsseessssiioonn=FieldIDName", 
    }); 
},

的數據看起來是這樣，因爲一路上我遇到了麻煩「&」的方式不是XML標準，並且與那就比較麻煩了「&放大器;」如果你能相信它。所以在web服務中，我將傳入的「名稱」值解析爲三個值。沒問題。

來源

2011-11-01 21:48:44

檢查您是否使用jQuery驗證。如果是，請檢查版本。您是否使用https://github.com/jzaefferer/jquery-validation中的那個，然後知道它（肯定是v1.6）可能會導致鼠標在自動完成下拉列表中出現問題。

解決方案：

stackoverflow.com/questions/13379439/jquery-ui-autocomplete-doesnt-allow-options-to-be-selected-with：從https://plugins.jquery.com/validate/

參見下載腳本-mouse-了
forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

來源

2015-06-25 14:56:18 antiskidwarpdrive

謝謝，請看看。 –

jQuery自動完成 - 左鍵點擊不點火選擇事件

回答

相關問題