Autocomplete in JQUERY MOBILE text input

Question

I searched a lot on net but couldnt find any solution. I am making a webapp in which I want 2 textbox to get data input from user. I want autocomplete feature in this textbox. The list of tags for autocomplete is available locally. I tried listview but what I want is that after user select some option from autocomplete hints, the textbox should have the selected value, and through some object, i should get the value of textbox to be used by javascript/php. This is a very basic thing, but I'm not able to do. Please help me out

I tried this jsfiddle.net/ULXbb/48/ . But the problem in this is that both listview gets same value after I select something in 1 listview.

Answer 1

In order not to add the same value to both search input, you need to target them using .closest(), .next(), .prev() and .find(). jQuery-Mobile, enhances list-view with data filter in a different way.

Demo

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

The form where the input is located, is on the same level of the ul. To target the input box, you need to use .prev('form').find('input'). Check the demo and the new code below.

$("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');
});