JQuery清理自動完成組合框值

我用jquery組合框來自動完成，我需要清理它的值。我遇到了這樣的解決方案：http://jsfiddle.net/BbWza/30/JQuery清理自動完成組合框值

問題是，下面的代碼清除屏幕中所有組合的所有文本框。我想只清除一個組合（例如，假設第一個組合）。

$('.ui-autocomplete-input').focus().val('');

雖然只有一個明確的鏈接按鈕，它並不重要的連擊只要將清零，因爲只有一個。

該解決方案應該適用於屏幕中的N個組合。例如。每個按鈕應該清空其相應的組合。

來源

2011-07-21 ClayKaboom

可以通過添加此行添加ID來生成的場的_create()最後一行：

input.attr('id', $(select).attr('id')+'-input');

現在您可以選擇與IDS的各個字段：

$('#combobox-input').focus().val('');

來源

2011-07-21 16:37:47 JJJ

+1很好地完成，當我意識到你不能通過ID選擇它我會嘗試類似的東西。很好的例子！ – dkroy

我認爲這是最通用的解決方案。這樣我不依賴於鏈接，我可以讓其他組件清除我的組合框。謝謝你！ – ClayKaboom

那麼，在例如下面將只清除最後組合框：
$('.ui-autocomplete-input').last().focus().val('');

這將清除第一個：
$('.ui-autocomplete-input').first().focus().val('');

來源

2011-07-21 16:26:35 dkroy

我真的不相信最後一個例子。無論如何，一個ID應該返回一個元素。 – pimvdb

@pimvdb你在哪裏，所以我只是刪除它。 – dkroy

要清除僅僅只有一個組合，你必須選擇它與它的ID：

$('#combobox').focus().val(''); 
    $('#combobox').autocomplete('close');

與你的c您正在選擇所有組合框，因爲您正在使用類選擇器。

如果你想兩個按鈕（每個組合框），你可以做

編輯：

$('.clicky').click(function() { 
    var combo= $(this).prevAll('input:first'); 
    combo.focus().val(''); 
    combo.autocomplete('close'); 
    return false; 
});

小提琴這裏：http://jsfiddle.net/BbWza/39/

來源

2011-07-21 16:27:33

'$（'#combobox'）'不起作用，它選擇創建組合框的選擇字段，而不是組合框本身。 – JJJ

你是對的，我現在編輯了一個更通用的解決方案的答案 –

Your jsfiddle對於哪個組合框應該清除有點含糊不清 - 有兩個組合框，但只有一個清除鏈接，所以如果鏈接應該只清除一個或兩個組合框並不明顯。

我懷疑在現實世界中，每個組合框都有它自己的明確鏈接。爲您的清除鏈接選擇正確的文本框都取決於您的HTML。一個簡單的情況是，其中明確聯繫的下一個兄弟到你<select>元素：

<select class="combo"> 
    ... 
</select> 
<a href="#" class="clearCombo">Clear</a>

然後，你可以通過使用類創建一個呼叫的連擊。然後一次創建清晰的點擊處理程序。處理程序將使用.prevAll(".ui-autocomplete-input")來查找其關聯的文本框。

$("select.combo").combobox(); 
$("a.clearCombo").click(function() { 
    $(this).prevAll('.ui-autocomplete-input').first() 
     .focus() 
     .val('') 
     .autocomplete('close'); 
    return false; 
});

Working demo at jsfiddle

如果您的鏈接是不是你的組合框的兄弟，沒關係。要麼找到它的兄弟姐妹，並使用上述方法。或者，如果這不起作用，請找到組合和鏈接的共同父項。

<span class="comboContainer"> 
    <span> 
     <select class="combo"> 
      ... 
     </select> 
    </span> 
    <a href="#" class="clearCombo">Clear</a> 
</span>

您使用.closest(".comboContainer")和.find(".ui-autocomplete-input")：這隻有在共同的父只包含一個組合和一個鏈接的作品

$("select.combo").combobox(); 
$("a.clearCombo").click(function() { 
    $(this).closest(".comboContainer").find('.ui-autocomplete-input') 
     .focus() 
     .val('') 
     .autocomplete('close'); 
    return false; 
});

Working demo at jsfiddle

的好處這些技術是鏈接不需要知道其關聯組合框的ID。我們可以從HTML中推斷出它。這使得移動組合和添加新組合變得非常容易。

兩個建議：

添加一個明確的方法來你的插件。你的小部件用戶不應該知道它的內部工作。在你的例子中，你必須知道這個小部件使用.autocomplete()。這也可以防止你稍後改變你的實現。添加一個「清除」方法將簡化您的點擊處理程序到$(this).prevAll("select.combo").combobox("clear")。
爲您的小部件提供創建清除按鈕本身的選項。用戶可以隨時禁用它，並根據需要添加自己的清除按鈕。

來源

2011-07-21 17:38:31 gilly3

-1

如何給出明確的按鈕autocombobox請告訴我

可以通過添加這條線的_create()最後一行添加ID來生成的字段：

input.attr('id', $(select).attr('id')+'-input');

現在您可以選擇帶有ID的個別字段：

$('#combobox-input').focus().val('');

來源

2017-01-04 13:29:03

您可以在自動完成的事件「關閉」中清除它

$("#your-input").autocomplete({ 
    source: items,    
    close: function (event, ui) { 

     $(this).val(""); 

    } 
});

來源

2017-10-18 16:32:31

JQuery清理自動完成組合框值

回答

相關問題