在jsp中的jQuery即時過濾器單擊后單擊html選擇不更改選項

Question

我在一個頁面上有3個select標簽，它們是從struts2 select標簽生成的。 我正在使用jQuery過濾器功能來過濾選擇。 每個選擇一個文本字段，但是所有文本字段都使用相同的過濾器功能。 我還有另一個onChange事件上調用的js函數。

問題是，在添加此jQuery函數之前，我正在過濾表單提交和重新加載頁面的列表，現在過濾是即時發生的，但是當我編寫過濾條件時，選擇會以某種方式失去選擇的焦點，而當我單擊某個元素時就不會選擇發生這種情況，或者更好的說是一種選擇：元素用虛線圈出，而不用藍色填充的正方形選出。 js被調用，表單已提交，但具有舊值。 但是，如果我首先單擊選擇沒有元素的區域（空白區域），然后選擇一個元素，則一切正常。 我如何跳過冷杉的喀噠聲？

現在我的代碼：

I. jQuery過濾器功能以及對selects和textfield的綁定。

jQuery.fn.filterByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().scrollTop(0).data('options');
            var search = $.trim($(this).val());
            var regex = new RegExp(search,'gi');

            $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                    $(select).append($('<option>').text(option.text).val(option.value));
                }
            });
        });
    });
};

$(function() {
    $('#selectedClientId').filterByText($('#filterClient'));
    $('#selectedLocationId').filterByText($('#filterLocation'));
    $('#selectedViewPointId').filterByText($('#filterViewpoint'));
});

II。 選擇之一：

<s:select size="10" cssStyle="width:220px;"
        label="Select a client"
        listKey="id" listValue="name"
        list="clientSelectList"
        name="selectedClientId" id="selectedClientId"
        headerKey="-1" headerValue="Client List"
        onchange="onChangeSelect()"
 />

III。 選擇的文本字段：

Filter:<s:textfield name="filterClient" id="filterClient" size="15" autocomplete="off"/>

IV。 onChangeSelect（）：

function onChangeSelect() {
    document.getElementById('deviceListForm').action = '<s:url value="/admin/displayDeviceListPage.action"/>';
    document.getElementById('deviceListForm').submit();
}

在圖像中：在第一個選擇中，jquery過濾器后選定選項的外觀，在其他兩個選擇中是“好”的選定選項。 http://i.stack.imgur.com/TAJeY.png

編輯 ：因此，在對此帖子的首次回復之后（感謝Amit1992），我開始進一步挖掘。 在Mozilla中，第一次單擊后（在出現框或虛線之后），將向服務器發出請求，其中包含舊的選定項（如果未選擇，則為null），頁面刷新，因為沒有任何反應。 另一方面，在Chrome瀏覽器中，首次點擊不會發出任何請求。 它只是選擇（假設）選擇標簽。 第二個選擇提出了很好的要求。

短篇小說 ：

• mozilla：單擊1->使用舊的選定值請求->刷新->無更改

• chrome：單擊1->選擇選擇標記，並且沒有請求->單擊2->請求，因為它應該發生

• IE瀏覽器 -可以。 1單擊->選擇並加載頁面。 好，這真的讓我感到驚訝。 起初，我認為在IE中查看結果是沒有用的。

EDIT2

經過一番挖掘后，我得出的問題是，在文本字段中鍵入內容時，選擇內容失去了焦點。 如果我放$('#selectedClientId').focus(); 在$(textbox).bind('change keyup', function()末尾的filterByText函數中，在每次寫完一個char后，第一個選擇的焦點就集中了，但這給了我另一個問題，我不能寫超過1個char一次，我必須單擊文本字段，寫一個字符，再次單擊，寫一個字符等。

Answer 1

可能會對您有幫助。 我在您的代碼中做了一些修改。

 $(function() {

    $('#selectedClientId').filterByText($('#textbox'), false);
  $("#selectedClientId").change(function(){

    alert("you have selected ++ " + $(this).val());
  });
});

我使用jquery的change（）事件代替了JavaScript onChange（）。 您可以參考此鏈接http://jsfiddle.net/amitv1093/q55k97yc/ ，如果您正在使用jquery，我建議您完全使用它。

請讓我知道它是否有效。

Answer 2

我通過更改整個過濾器功能解決了該問題。 有問題的函數來自堆棧溢出問題響應（ 如何使用jQuery動態選擇<select>的過濾器選項？ ）。 從我得出的結論來看，問題在於$(textbox).bind('change keyup', function()行更改了對文本字段的焦點，因此第一次單擊將焦點更改為了select標簽。函數，起作用的函數取自同一篇文章，約翰·木蘭諾的回答：

$(document).ready(function() { filterClient(); filterLocation(); //same as filterClient filterViewpoint(); //same as filterClient }); function filterClient(){ var $this, filter, $input = $('#filterClient'), $options = $('#selectedClientId').find('option'); $input.keyup(function(){ filter = $(this).val(); $options.each(function(){ $this = $(this); $this.removeAttr('selected'); if ($this.text().toLowerCase().indexOf(filter.toLowerCase()) != -1) { $this.show(); } else { $this.hide(); } }); }); }