0

我已经看到了很多关于自动完成的问题和答案，但没有一个特定于我正在做的事情。我要做的是让用户从选择菜单中选择一个选项（即 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;
    }
}
4

2 回答 2

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>
于 2012-12-05T20:49:31.113 回答
0

如果您的问题是：如何在 JavaScript 中获取下拉列表中的选定值，那么答案是：$('#searchKey').val().

于 2012-11-30T20:15:54.793 回答