title: Html select not changes option on click after jquery instant filter in jsp
body: <p>I have 3 select tags on one page, generated from struts2 select tag. I am using a jQuery filter function that filters the select. One textfield for every select, but all of them use the same filter function. I have another js function that is called on onChange event.</p>
  
  <p>The problem is that before adding this jQuery function i was filtering the lists with form submit and reload the page and now the filtration happens instant, but when i write a filtration criteria the select somehow the select loses focus and when i click an element no select happens, or better lets say is a kind of select: the element is circled with a dotted line, not selected with a blue filled square. The js is called, the form submitted, but with the old value. However, if i first click in the select where are no elements (empty zone) and then i select an element everything is ok. How can i jump over the firs click? </p>
  
  <p>And now my code:</p>
  
  <p>I. The jQuery filter function and the binding to the selects and textfields.</p>
  
  <pre><code>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($('&lt;option&gt;').text(option.text).val(option.value));
                  }
              });
          });
      });
  };
  
  $(function() {
      $('#selectedClientId').filterByText($('#filterClient'));
      $('#selectedLocationId').filterByText($('#filterLocation'));
      $('#selectedViewPointId').filterByText($('#filterViewpoint'));
  });
  </code></pre>
  
  <p>II. One of the selects:</p>
  
  <pre><code>&lt;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()"
   /&gt;
  </code></pre>
  
  <p>III. The select's textfield:</p>
  
  <pre><code>Filter:&lt;s:textfield name="filterClient" id="filterClient" size="15" autocomplete="off"/&gt;
  </code></pre>
  
  <p>IV. The onChangeSelect():</p>
  
  <pre><code>function onChangeSelect() {
      document.getElementById('deviceListForm').action = '&lt;s:url value="/admin/displayDeviceListPage.action"/&gt;';
      document.getElementById('deviceListForm').submit();
  }
  </code></pre>
  
  <p>In the image: in the first select is how looks the selected option after jquery filter and in the other 2 selects are "the good" selected options.
  <a href="http://i.stack.imgur.com/TAJeY.png" rel="nofollow">http://i.stack.imgur.com/TAJeY.png</a></p>
  
  <p><strong>EDIT</strong>: So, after the first response to this post (Thanks Amit1992) I started digging further. In Mozilla after the first click (after the frame or dotted line appears) a request is made to the server with the old selected item (or null if none selected), the page refreshes as nothing happened.
        In Chrome, on the other hand, the first click does not make any request. It just selects (let's say) the select tag. And the second select makes a good request.</p>
  
  <p><strong>Short story</strong>: </p>
  
  <ul>
  <li><p>mozilla: click 1 -> request with old selected value ->refresh -> no changes</p></li>
  <li><p>chrome: click 1 -> selects the select tag and no request is made -> click 2 -> request as it should happen</p></li>
  <li><p><strong>IE</strong> - works ok. 1 click-> select and load page as it should . OK this really surprises me. at first I thought is useless to look in IE what happens. </p></li>
  </ul>
  
  <p><strong>EDIT2</strong> </p>
  
  <p>After some digging i concluded that the problem is that when typing in the textfield the select loses focus. If I put <code>$('#selectedClientId').focus();</code> 
  in the filterByText function at the end of the <code>$(textbox).bind('change keyup', function()</code> the fist select is focused after every char written. But this gives me another problem. I can't write more than 1 char at a time. I have to click the textfield, write a char, click again, write a char etc. </p>