如何在 Listview 输入标签中创建一个按钮答案

【问题标题】：how to create a button in the Listview input tag如何在 Listview 输入标签中创建一个按钮
【发布时间】：2014-12-10 09:48:52
【问题描述】：

好的，所以我有一个实现 http://demos.jquerymobile.com/1.4.0/listview-autocomplete-remote/ 的 UL。用户输入，结果被建议为自动完成功能。

<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Input here...." data-filter-theme="a" >
</ul>

现在我想要的是：在结果被建议为“显示”选项后，用户可以选择它。一旦做出选择，选择的选项就会成为上述 UL 的“输入”部分中的一个按钮。

类似这样的东西：

禁止我的 CSS 知识不好。我不知道该怎么做。我尝试设置 val() 的 input 。但似乎 val() 只能将文本设置为 HTML。所以 $("#input").val("Hey") 是正确的，但 $("#input").val("<a href="#" class="ui-btn">Hey</a>") 。也将呈现为 text 。

提前致谢！

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

您不能将 html 添加到输入中。

你必须用 div 或不能作为输入的东西来掩盖它。

想法：选择选项时隐藏您的输入。用看起来像输入的 div 包装它（输入）。将选择添加到该包装器 div。

类似这样的：

var $input = $('#input-wrapper > input');
var $selections = $('#input-wrapper > #selections');

$('#options > li').click(function(){
    var $new_selection = $('<li />').text($(this).text());
    $selections.append($new_selection);

    $input.val($input.val() + ', ' + $(this).text());

    $('#debugger > #input-value').text($input.val());
});

查看完整代码并在此处进行测试：http://jsfiddle.net/1h46f8qw/

【讨论】：

【解决方案2】：

你试过追加方法吗

$("#input").append("<a href='#' class='ui-btn'>Hey</a>")

或

$("#input").html("<a href='#' class='ui-btn'>Hey</a>")

【讨论】：