JQUERY MOBILE 텍스트 입력에서 자동 완성

Question

그물을 많이 검색했지만 해결책을 찾지 못했습니다. 나는 사용자로부터 데이터 입력을 얻기 위해 2 textbox를 원한다는 webapp을 만들고있다. 이 텍스트 상자에 자동 완성 기능이 필요합니다. 자동 완성 태그 목록은 로컬에서 사용할 수 있습니다. 나는 listview를 시도했지만 내가 원하는 것은 사용자가 자동 ​​완성 힌트에서 몇 가지 옵션을 선택한 후 텍스트 상자에 선택된 값이 있어야하고 어떤 객체를 통해 javascript/php에서 사용할 텍스트 상자의 값을 얻어야한다는 것입니다. 이것은 매우 기본적인 것이지만 할 수는 없습니다. 제발 도와주세요

나는 이것을 jsfiddle.net/ULXbb/48/ 시도했습니다. 그러나이 문제는 하나의 listview에서 무언가를 선택한 후에 두 listview가 같은 값을 얻는다는 것입니다.

Answer 1

검색 입력에 동일한 값을 추가하지 않으려면 .closest(), .next(), .prev() 및 .find()을 사용하여 타겟팅해야합니다. jQuery-Mobile은 데이터 필터를 사용하여 목록보기를 다른 방식으로 향상시킵니다. input가 위치한 form

<form> 
    <input> 
</form> 
<ul data-role="listview"> 
    <li> 
    <a>text</a> 
    </li> 
</ul> 

Demo

는 ul 동일한 수준이다. input 상자를 타겟팅하려면 .prev('form').find('input')을 사용해야합니다. 아래의 데모와 새로운 코드를 확인하십시오.

$("input[data-type='search']").keyup(function() { 
    if ($(this).val() === '') { 
     $(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden'); 
    } 
}); 

$('a.ui-input-clear').click(function() { 
    $(this).closest('input').val(''); 
    $(this).closest('input').trigger('keyup'); 
}); 

$("li").click(function() { 
    var text = $(this).find('.ui-link-inherit').text(); 
    $(this).closest('[data-role=listview]').prev('form').find('input').val(text); 
    $(this).closest('[data-role=listview]').children().addClass('ui-screen-hidden'); 
}); 

Answer 2

덕분에 user714852 @ 나는 당신의 대답은 바로 스크립트 태그에이 줄을 추가 확장했다 : 그것은 경이를 할 것입니다

$("#mylist li").addClass('ui-screen-hidden');

.

작동 예제 : Listview Autocomplete - Enhanced