javascript - 如何创建包含自动完成框以选择条目的模式弹出窗口？

Question

是否可以在 Javascript 中创建某种包含 JQueryUI 自动完成功能的模式框？

用户单击一个图标，该框将打开，用户将选择一个值，javascript 将检索它并将其设置为<div>.

如果是，我应该如何进行？任何代码示例？

Answer 1

是的，这是可能的。只需将自动完成输入放在jquery对话框模态html中，例如：

<div id="dialog-form" title="Search">
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" />
    </div>
</div>

<button id="open-search">Open search</button>

<div id="result"></div>

然后只需打开模式并在关闭时设置值：

$("#dialog-form").dialog({
    autoOpen: false,
    modal: true,
    close: function() {
        var value = $("#tags").val();
        $("#result").html(value);
    }             
});

$("#tags").autocomplete({
    source: ["ActionScript", "AppleScript", "Asp"]
});

// Maybe use this on your icon, to open the modal.
$("#open-search").click(function() {
    $("#dialog-form").dialog("open");
});

这是小提琴中的完整示例：http: //jsfiddle.net/Uvx8s/2/