在JQUERY MOBILE文本输入中自动完成

Question

我在网上搜索了很多,但无法找到任何解决方案.我正在制作一个webapp,我想要2个文本框来从用户那里获取数据.我想在此文本框中使用自动完成功能.自动完成的标记列表可在本地获得.我试过列表视图但我想的是,用户选择后自动完成从一些提示选项,文本框应该有选择的价值,并通过一些对象,我应该得到由JavaScript/PHP中使用文本框的值.这是一个非常基本的事情,但我无法做到.请帮帮我

我试过这个jsfiddle.net/ULXbb/48/.但是这个问题是我在1个listview中选择了一些东西后,listview得到了相同的值.

Answer 1

为了不相同的值添加到这两个搜索输入,则需要使用瞄准他们.closest(),.next(),.prev()和.find().jQuery-Mobile以不同的方式使用数据过滤器增强列表视图.

演示

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

它所form在的位置与input它的位置相同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');
});