jQuery listview - 항목을 클릭하면 목록을 숨기는 방법

Question

jQuery를 사용하여 listview 및 필터를 만듭니다. 사용자가 항목을 클릭하면 필터가 텍스트를 클릭 한 항목으로 설정하고 목록을 숨기려고합니다. 하지만 영구적 인 것은 아닙니다! 사용자가 필터 텍스트를 변경하면 목록이 다시 표시되어야합니다. 내가 알아 낸 http://view.jquerymobile.com/master/demos/

Answer 1

:

$(document).ready(function() { 

     jQuery.support.cors = true; 
     $("#groupSelectList").listview({ 
      filter: true, 
      filterPlaceholder: '', 
      icon: false 
     }); 

     $('#groupSelectList').children('li').on('click', function() { 
      $('#groupName').val($(this).text()); 
      $("input[data-type='search']").val($(this).text()) 
      //$("#groupSelectList").listview("refresh");//this refresh doesn't appear to do anything. 
      $("#groupSelectList").listview().hide()//hide works, but the list won't come back if the user changes the input text. 
     }); 
    }); 

...

이 페이지의 위젯은 내가 사용하고 컨트롤의 예입니다 : 여기

내가 가진 무엇 어떻게해야할까요? 누구나 관심이있는 경우 jQuery 모바일 목록보기 컨트롤을 클릭시 사라지게 한 다음 변경 사항에 다시 나타나면 임시 키 업 이벤트를 검색 상자에 바인딩합니다. 이제 내 코드는 다음과 같이 보입니다.

var groupSelectHandler = function() { 
     $("#groupSelectList").listview().show() 
     $("#groupSelectList").listview("refresh"); 
     $("input[data-type='search']").unbind('keyup', groupSelectHandler); 
    } 

    $(document).ready(function() { 
     $("#groupSelectList").listview({ 
      filter: true, 
      filterPlaceholder: '' 

     }); 

     $('#groupSelectList').children('li').on('click', function() { 
      $('#groupName').val($(this).text()); 
      $("input[data-type='search']").val($(this).text()); 
      $("#groupSelectList").listview().hide(); 
      $("input[data-type='search']").bind('keyup', groupSelectHandler); 
     }); 
    }); 

이 예에서 click이 시작되면 groupSelectHandler가 keyup에 바인딩됩니다. 키 업이 발생하면 목록이 표시되고 키 업 이벤트가 제거됩니다.

Answer 2

가능한, 매우 간단한 해결책이 될 수 있습니다

$(document).on("pageinit", "#myPage", function() { 
    $('#groupName').val($(this).text()); 
     $("input[data-type='search']").val($(this).text());; 
    $('#groupSelectList li').each(function (index) { 
     $(this).addClass("ui-screen-hidden"); 
    }); 
});