텍스트 상자의 사용자 입력을 기반으로 드롭 다운에서 선택한 항목을 어떻게 변경합니까?

Question

대규모 고객을 위해 1000 개가 넘는 품목을 포함 할 수있는 선택 드롭 다운이 있습니다.

<select name="location" id="location">
    <option value="1">Store# 1257</option>
    <option value="2">Store# 1258</option>
    ...
    <option value="973">Store# 8200</option>
    <option value="974">Store# 8250</option>
    <option value="975">Store# 8254</option>
    <option value="976">Store# 8290 Fuel Center</option>
</select>

또한 텍스트 상자가 있고 사용자가 텍스트를 입력하면 드롭 다운에서 선택한 항목을 이동하려고합니다.

예를 들어, 사용자 유형 82라면 82 개가 973이되는 상자의 첫 번째 항목으로 이동하려고합니다. 사용자 유형 825가 974 등으로 이동하는 경우 사용자가 연료를 유형하는 경우 해당 문자열을 포함하는 첫 번째 옵션.

현재 jQuery를 JavaScript 라이브러리로 사용하고 있습니다.

이것을 해결하기 위해 무엇을 제안합니까? 자동 완성으로 전환해야합니까? 그렇다면 일부 고객은 3 또는 4 만 선택할 수 있으므로 전체 목록을 떨어 뜨릴 화살표가있는 것이 필요합니다.

감사.

Answer 1

변수가 주어졌습니다 searchFor 여기에는 검색 문자열이 포함되어 있으므로이 jQuery 스 니펫으로 해당 텍스트가 포함 된 첫 번째 옵션을 선택할 수 있습니다.

$("#location option[text*=" + searchFor + "]:first").attr("selected", true);

따라서 ID에 텍스트 입력이있는 경우 selectSearchBox, 당신은 다음과 같이 쓸 수 있습니다.

$("#selectSearchBox").keyup(function () {
     var searchFor = $(this).val();
     $("#location option[text*=" + searchFor + "]:first").attr("selected", true);
});

Answer 2

사용 jQuery 자동 완성 플러그인 최선의 선택 일 수 있습니다. 이전 답변을 볼 수 있습니다 여기 SO (Select => 배열 변환을하지 마십시오. 배열 또는 서버 측 스크립트를 사용하십시오).