使用jquery在div标签中自动提示

时间:2015-03-16 07:53:23

标签: jquery

我有10个部分名称,分别以[[]]开头和结尾。

我必须对div标签进行自我提示,该标签设置为contenteditable=true 当用户写[[时,它会显示部分名称..

div标签

不支持自动填充功能
 <div id="textbox" class="mousetrap" contenteditable="true" autocomplete="on" spellcheck="true">
                        </div>
$(function() {
                var availableTags = [
                    "Window",
                    "Door and frame",
                    "Ceilling",
                    "Condition"
                ];
                $("#textbox").autocomplete({
                    source: availableTags
                }); 
             });

任何建议?

1 个答案:

答案 0 :(得分:0)

您必须稍微更改一下代码,然后才能开始工作

如下所示

 $(function() {
                $.fn.val = $.fn.html;
                var availableTags = [
                    "Window",
                    "Door and frame",
                    "Ceilling",
                    "Condition"
                ];
                $("#textbox").autocomplete({
                    source: availableTags
                }); 
             });

休息你已经完成了。

我将整个代码放在下面的任何方式

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

    <script type="text/javascript">
        //<![CDATA[ 
        $(window).load(function(){
        $(function() {
                $.fn.val = $.fn.html;
                var availableTags = [
                    "Window",
                    "Door and frame",
                    "Ceilling",
                    "Condition"
                ];
                $("#textbox").autocomplete({
                    source: availableTags
                }); 
             });
        });
        //]]>  

    </script>
</head>
<body>
    <div id="textbox" class="mousetrap" contenteditable="true" autocomplete="on" spellcheck="true">
    </div>
</body>
</html>