自动完成在jQuery Mobile的文字输入 [英] Autocomplete in JQUERY MOBILE text input

问题描述

我搜索净很多，但无法找到任何解决方案。我在做，我想2文本框从用户那里得到的数据输入Web应用程序。我想在这个文本框自动完成功能。标签的自动完​​成列表是当地有售。我试着列表视图但我想的是，用户选择后自动完成从一些提示选项，文本框应该有选择的值，并通过一些对象，我应该得到由JavaScript / PHP中使用文本框的值。这是一个非常基本的东西，但我没能做到。请帮我出

我试过这个jsfiddle.net/ULXbb/48/。但在这个问题是，这两个列表视图得到相同的值后，我在1 ListView中选择一些东西。

解决方案

为了不相同的值，同时添加到搜索输入，你需要他们使用的 .closest（） ， 的.next（） ， 。preV（） 和 .find（） 。的jQuery-移动，提高以不同的方式列表视图数据过滤

  

演示

＆LT;形式为GT;
  ＆LT;输入＆GT;
＆LT; /表及GT;
＆LT; UL数据角色=列表视图＆GT;
  ＆LT;立GT;
    ＆LT; A＆GT;文字＆lt; / A＆GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;


的格式其中输入所在地，是在同级别的 UL 。要定位输入中，您需要使用。preV（形式）。找到（'输入'）。检查演示和新的code以下。

$（输入[数据类型='搜索']）。KEYUP（函数（）{
   如果（$（本）.VAL（）===''）{
       $（本）.closest（形式）下一个（[数据角色=列表视图]）儿童（）addClass（UI屏幕隐藏）。;
   }
}）;$（'a.ui输入清晰'）。点击（函数（）{
   $（本）.closest（输入）VAL（''）。
   $（本）.closest（'输入'）的触发（'的keyup'）。
}）;$（礼）。点击（函数（）{
   变种文字= $（本）.find（'UI的链接继承。）文本（）。
   。$（本）.closest（'[数据角色=列表视图]'）preV（'形式'）找到（'输入'）VAL（文本）。
   $（本）.closest（'[数据角色=列表视图]'）儿童（）addClass（UI屏幕隐藏）。
}）;


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.

解决方案

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

这篇关于自动完成在jQuery Mobile的文字输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！