Question

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

我试过这个jsfiddle.net/ULXbb/48/。但问题在于，在我在1个列表视图中选择某个内容后，两个listview都获得了相同的值。

Answer 1

为了不向两个搜索输入添加相同的值，您需要使用.closest()，.next()，.prev()和.find()来定位它们。 jQuery-Mobile以不同的方式增强了数据过滤器的列表视图。

<强> Demo

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

Answer 2

谢谢@ user714852我已经扩展了您的答案，只需在脚本标记中添加以下行：

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

它会创造奇迹。

一个工作示例：Listview Autocomplete - Enhanced

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

2 个答案: