如何访问由 data-filter="true" 创建的输入元素答案

【问题标题】：How do I access the input element created by data-filter="true"如何访问由 data-filter="true" 创建的输入元素
【发布时间】：2013-04-23 01:56:29
【问题描述】：

祝你一切顺利。我有一个表单，其中一部分是使用 jquery mobile 的 listview 自动完成/数据过滤器使用本地数据的搜索框。

用户输入几个字符后，他们可以从自动完成中选择一个建议的结果。发生这种情况时，我希望将所选结果填入搜索框。

问题是，由于 jquery-mobile 创建了输入元素，我不确定如何获取该元素的句柄。

我需要一个元素的句柄，因为在某些情况下我希望有一个默认值，并且因为我没有将列表视图项用作链接（它是表单的一部分。）

我发现的示例似乎只是展示了如何设置列表视图过滤器，但在显示结果后实际上并没有对其进行任何操作。

我的列表视图： http://jsfiddle.net/EXHNp/

<div data-role="fieldcontain">
<ul class="emp_listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Emp Code..." data-role="listview" data-inset="true">
    <li><a>fred</a></li>
     <li><a>mary</a></li>
     <li><a>bob</a></li>
     <li><a>alex</a></li>
</ul>

谢谢，尼克

【问题讨论】：

标签： listview jquery-mobile

【解决方案1】：

没有直接的方法可以访问输入元素，而是需要遍历 DOM。您可以使用以下代码获取输入元素。

$("ul.emp_listview").prev().find('input.ui-input-text');

【讨论】：

谢谢，我有点用过这个，但只是 .find()'d 小部件中的元素。

【解决方案2】：

我最终扩展了 mobile.listview 小部件以添加获取/设置功能

基本上我做了什么：

$.mobile.listview.prototype.searchElement;

$.mobile.listview.prototype.getInput = function(){
    return $(searchElement).find('input').val();    
};

$.mobile.listview.prototype.setInput = function(a_input){  
    return $(searchElement).find('input').val(a_input);
};

并且我已经覆盖了委托的 listviewcreate 函数以将创建的输入包装器保存在对象中。

$.mobile.document.delegate( "ul, ol", "listviewcreate", function() {
...
searchElement = wrapper;

很可能是非常错误的方式，但似乎有效。欢迎批评。

【讨论】：