Question

您好我正在尝试开发一个自动完成文本框，其中多个值以句号分隔，下面的元素是我的代码。

<script>
    $(function() {
        var availableTags = [
            "Electronics",
            "Motors",
            "Cloths"

        ];
        var Electronics = [
            "Laptops",
            "Mobiles",
            "Desktop"

        ];
        var Motors = [
            "Bike",
            "Car"

        ];
        var Cloths = [
            "Shirt",
            "Pants",
            "Jackets"

        ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }
        $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).autocomplete( "instance" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ". " );
                    return false;
                }
            });
    });
    </script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">Tag programming languages: </label>
    <input id="tags" size="50">
</div>
</body>

我的要求是当我进入＆＃39; @＆＃39;在文本框中，availabletags元素应显示为＆＃39;。＆＃39;它显示了相应的元素字段项。例如，当我在文本框中输入＆＃39; @＆＃39;并选择＆＃39; motor＆＃39;从自动填充列表和＆＃39;。＆＃39;出现在自行车和汽车上。我正在努力实现它。有人可以帮帮我..

Answer 1

以下是获取问题参考的好链接。希望它会对你有所帮助。 https://github.com/LeaVerou/awesomplete

自动填充文本框，其中多个值由句号和元素分隔

1 个答案: