如何在Listview输入标记中创建一个按钮

Question

好吧，我有一个实施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()。但似乎val（）只能将文本设置为HTML。因此$("#input").val("Hey")是正确的$("#input").val("<a href="#" class="ui-btn">Hey</a>")。也将呈现为文本。

提前致谢！

Answer 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/

Answer 2

你尝试追加方法吗

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

或

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