Jquery filtered Autocomplete in JSP

Question

I've seen a lot of questions and answers for autocomplete but none specific to what I'm doing. What I'm trying to do is have the user select an option from a select menu (i.e. SSN, First Name, Last Name, DOB), this will of course hit the database and full up the respective data. When the user begins to enter characters in a text box, the autocomplete begins it's work by displaying the proper data. I have an autocomplete that works just fine, the problem is -

how do I determine what data to access based on the select menu value selected?

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 FILE

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

Okay, here is the solution to the problem i was having. This required some modification to the jquery.autocomplete.js file as well. But it all works as it should - the user selects a value from the dropdown/selectmenu, this determines which data string will be accessed. When the user enters characters into text box, the correct data list is displayed. If you have any questions, let me know and I'll do my best to answer them.

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 Elements:

    <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

If your question is: how to get the selected value in the dropdown in JavaScript, then the answer is: $('#searchKey').val().