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>

ジャバスクリプト

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);
    }
%>

ジャバファイル

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 に答える