Question

我已经看到很多关于自动完成的问题和答案，但没有针对我正在做的事情。我要做的是让用户从选择菜单中选择一个选项（即SSN，名字，姓氏，DOB），这当然会打到数据库并填满相应的数据。当用户开始在文本框中输入字符时，自动完成功能通过显示正确的数据开始工作。我有一个自动完成工作正常，问题是 -

如何根据所选的菜单值确定要访问的数据？

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

好的，这是我遇到的问题的解决方案。这也需要对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()。

Jquery在JSP中过滤了自动完成

2 个答案: