2015-01-04 4 views
1

사용자가 입력 한 것과 일치하지 않는 옵션을 분리하는 검색 필터를 만들었습니다.JQuery (모바일)/JavaScript 선택 옵션을 선택할 수 없습니다.

예를 들어 목록에 "hello", "good bye", "halo"가 포함되어 있고 "h"를 입력하면 "hello"및 "halo"만 표시됩니다.

제가 직면 한 문제는 옵션을 하나만 선택할 수는 없지만 선택할 수있는 옵션이 여러 개인 경우입니다. 여기

제 (완전 코드)입니다 JSFiddle :JSFIDDLE LINK

문제를 재현하려면 다음 입력 "또 다른"입력 상자에 선택하려고 선택 메뉴 옵션 "다른 할".

두 개 이상의 단어가있는 경우 아무 옵션이나 선택할 수 있으므로 "do"라는 단어를 입력하면 해당 단어가있는 옵션을 선택할 수 있습니다.

var probOptions = $("#problem>option"); 

function searchFilter() { 
    $("#searchInput").change(function() { 
     var searchString = $(this).val().toLowerCase(); 
     $("#problem").empty().append(probOptions); 
     $("#problem>option").each(function() { 
      var text = $(this).text().toLowerCase(); 
      if (text.indexOf(searchString) <= -1) { 
       $(this).detach(); 
       // THE LINE BELOW FIXES THE PROBLEM (THE LINE BELOW IS NEWLY ADDED) 
       $("#problem").selectmenu("refresh"); 
      } 

     }); 

    }); 

} 

searchFilter(); 
+0

jQuery Mobile 프레임 워크를 사용하고 있습니까? – Omar

+0

안녕하세요, Omar, 네 JQuery Mobile을 사용하고 있습니다. – Newtonic

+0

나는 문제를 해결할 수 있었다. 비슷한 문제에 직면했다면 내 대답을 확인해 보라. 제 질문을 보면서 시간을내어 주셔서 감사합니다. – Newtonic

답변

0

직접 문제를 해결할 수있었습니다.

분명히 JQuery 모바일의 경우 목록을 새로 고쳐야하지만 표준 JQuery는 필요하지 않습니다. 문제는이 문제가있는 사람을 도움이

$("#problem").selectmenu("refresh"); 

희망 : (#problem은 선택 메뉴의 ID입니다)

는 여기에 솔루션입니다.

관련 문제