jQuery過濾JSP中的自動完成

Question

我已經看到很多關於自動完成的問題和答案，但沒有具體到我正在做什麼。我想要做的是讓用戶從選擇菜單中選擇一個選項（即SSN，名字，姓氏，出生日期），這當然會打到數據庫並完成相應的數據。當用戶開始在文本框中輸入字符時，自動完成功能通過顯示正確的數據開始工作。我有一個自動完成工作正常，問題是 -

如何根據所選擇的菜單值確定要訪問的數據？

HTML

<div id="search-title"> Employees</div> 
     <div id="search-container-large"> 
       <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
        <td> 
         <label for="search-text" class="search-label">Search By:</label> 
         <select name="searchkey" size="1" id="searchkey" class="dropDown"> 
          <option value="0" selected> </option> 
          <option value="2" >SSN</option> 
          <option value="4" >Last Name</option> 
          <option value="3" >First Name</option> 
          <option value="5" >ID</option> 
          <option value="6" >Number</option> 
         </select> 
    <input name="searchvalue" type="text" class="form-field-search" id="searchvalue"/><a href="#"><img src="img/search-btn.png" width="28" height="24" border="0" class="search-btn"/></a> 
        </td> 
        </tr> 
       </table> 
    </div> 

JAVASCRIPT

jQuery(function() { 
    $("#searchvalue").autocomplete("http://localhost/test/getData.jsp", { 
     extraParams: { 
      filter: getDropdownValue() 
     } 
    }); 
}); 

    function getDropdownValue() { 
    var compId=document.getElementById("searchkey").value; 
    return compId; 
    } 

JSP

<% 
    DummyDB db = new DummyDB(); 

    String name=request.getParameter("filter"); 

    String query = request.getParameter("q"); 
    List<String> fnames = db.getData(query); 

    Iterator<String> iterator = fnames.iterator(); 
    while(iterator.hasNext()) { 
     String searchvalue = (String)iterator.next(); 
     out.println(searchvalue); 
    } 
%> 

的Java文件

public class DummyDB { 
    private int firstNames; 
    private String data = "Alan, Albert, Alex, Bain, Brian, Carl, Chris, David, Derek, Frank, Frodo, Gary, Greg, Yaser"; 

    private List<String> fnames; 
    public DummyDB() { 
     fnames = new ArrayList<String>(); 
     StringTokenizer st = new StringTokenizer(data, ","); 

     while(st.hasMoreTokens()) { 
      fnames.add(st.nextToken().trim()); 
     } 
     firstNames = fnames.size(); 
    } 

    public List<String> getData(String query) { 
     String searchvalue = null; 
     query = query.toLowerCase(); 
     List<String> matched = new ArrayList<String>(); 
     for(int i=0; i<firstNames; i++) { 
      searchvalue = fnames.get(i).toLowerCase(); 
      if(searchvalue.startsWith(query)) { 
       matched.add(fnames.get(i)); 
      } 
     } 
     return matched; 
    } 
} 

Answer 1

好的，這是我遇到的問題的解決方案。這也需要對jquery.autocomplete.js文件進行一些修改。但它的工作原理應該是這樣的 - 用戶從下拉/選擇菜單中選擇一個值，這將決定訪問哪個數據字符串。當用戶在文本框中輸入字符時，顯示正確的數據列表。如果您有任何問題，請告訴我，我會盡我所能來回答他們。

HTML的Javascript：

<script> 
    jQuery(function() { 
     $("#searchvalue").autocomplete("http://localhost/test/getData.jsp",{mustMatch:1}); 
    }); 

     function changeSkey(val) 
    { 
      $auto.flushCache(); 
     $auto.setExtraParams({f:val}); 
    } 
</script> 

HTML元素：

<div id="search-container-large"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
       <td> 
        <label for="search-text" class="search-label">Search By:</label> 
        <select name="searchkey" size="1" id="searchkey" class="dropDown" onchange="changeSkey(this.value);"> 
         <option value="0" selected> </option> 
         <option value="1" >SSN</option> 
         <option value="2" >Last Name</option> 
         <option value="3" >First Name</option> 
         <option value="4" >ID</option> 
         <option value="5" >Number</option> 
        </select> 
<input name="searchvalue" type="text" class="form-field-search" id="searchvalue"/><a href="#"><img src="search-btn.png" width="28" height="24" border="0" class="search-btn"/></a> 
       </td> 
       </tr> 
      </table> 
</div> 

Answer 2

如果您的問題是：如何在JavaScript中的下拉列表中獲取選定的值，那麼答案是：$('#searchKey').val()。