CODEWITHSUNDEEP
jquery-mobileautocomplete
user1518793
user1518793

Reputation: 135

Autocomplete in JQUERY MOBILE text input

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.

Upvotes: 3

Views: 14362

Answers (2)

parimalvyas
parimalvyas

Reputation: 11

Thanks @user714852 I have extended your answer just add this line in the script tag:

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

It will do wonders.

A working example: Listview Autocomplete - Enhanced

Upvotes: 0

Omar
Omar

Reputation: 31732

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

Upvotes: 7

Related Questions