JQuery自动完成功能不适用于bootstrap模式

Question

我在一个bootstrap模式中使用Knockout js模板实现了一个ui-li结构。在这个结构中，我的文本框看起来像这样。

 <input id="key" class="form-control" type="text" style="width:100px;border:0px;" data-bind="value:ConditionData" placeholder="Key">

在我的自动填充JS文件中，我编写了这样的代码

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    debugger;
    $("#key").autocomplete({
        source: availableTags,
        appendTo: $("#ruleNodeModal")
    });

    $(document).on('keypress', '#key', function (e) {
        debugger;
        $("#key").autocomplete({
            source: availableTags,
            appendTo: $("#ruleNodeModal")
        });
    });

但仍未显示自动填充功能。

谢谢和问候

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="return getSuccessOutput();"> test success </a> | <a href="#" onclick="return getFailOutput(); return false;"> test failure</a>
<div id="output">waiting for action</div>

http://jsfiddle.net/lughino/TtxqG/4/

你检查过这个吗？它纯粹是在Bootstrap中制作的。