具有多个值的自动完成文本框，这些值由句号和Elements分隔

autocomplete textbox with multiple values separated by full stop and Elements

本文关键字：分隔 Elements 文本      更新时间：2023-11-05

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

<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>

我的要求是，当我在文本框中输入"@"时，available tags元素应显示为"."并且它示出了相应的元素字段项。例如，当我在文本框中输入"@"，然后从自动完成列表中选择"motors"answers"."与自行车和汽车一起出现。我正在努力实现它。有人能帮我吗。。

下面是一个很好的链接，可以为您的问题获取参考。希望它能帮助你。https://github.com/LeaVerou/awesomplete

相关文章：