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.

Solution

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

Comments

[user1518793]

This is exactly what i wanted. Thanks a lot. However, i still have 1 doubt. I want to access text value of both filters in some other javascript script. How can i do that? What shall i pass in document.getElementById?

[Omar]

@user1518793 it depends when you want to read the values. check the updated demo.

[user1518793]

jsfiddle.net/ULXbb/244 check this..on clicking 'Submit' button, i want to run a javascript function and want to access those 2 filter values in that function..

[user1518793]

sorry..i am still not able to understand how can i access those 2 filter values??

[Omar]

@user1518793 check the last part in the code in this demo jsfiddle.net/Palestinian/dLeUw

[user1518793]

Thanks a lot for helping man..wasted a day ofine on his..really thanks a lot