Question

我正在尝试使用Twitter typeahead库为iFrame实现自动完成功能，这样当我开始在iframe中输入时，建议应该开始显示但不是。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
    </head>
    <body>
        <iframe id="editorArea-frame" style="width:100%; height:100%;" frameborder="0"></iframe>
    </body>
</html>
<script type="text/javascript" src="iframe.js"></script>

Javascript代码

var editorFrame = $('#editorArea-frame')[0];

var html = '';

html += '<style type="text/css">pre { background-color: #eeeeee; }</style>';

html += '<style type="text/css">html,body { cursor: text; } #editorDiv { display: inline-block; height: 100%; width: 100%; overflow-y:scroll; outline: none;}</style>';

html += '<body></div><div id="editorDiv" contentEditable="true"></div></body>';

editorFrame.contentDocument.open();

editorFrame.contentDocument.write(html);

editorFrame.contentDocument.close();

当我执行这段javascript代码时，iframe变为空白，其身体变空。任何人都可以指出我做错了什么？

   $('#editorArea-frame').typeahead({
      source: function(typeahead, query) {  
      return ['alpha', 'beta', 'bravo', 'delta', 'epsilon', 'gamma', 'zulu'];
      }
   });

Answer 1

您必须在输入字段上应用typeahead。如果可以，我还建议避免使用iframe。这可能会为你节省一些脑细胞。

将Typeahead与iFrame一起使用

1 个答案: