如何在没有任何单词的情况下连接多个单词,只是在自动完成中使用空格?

时间:2017-10-05 15:21:26

标签: javascript jquery

在这里,我的代码中的单词是使用逗号连接的。如何在没有逗号的情况下加入它们,只需要空格。我的意思是在输入一个单词并给出空格后自动完成显示。

function split(val) {
        return val.split(/, \s*/);
    } 

    function extractLast(term) {
        return split(term).pop();
    }


    function on_type() {
        $('#query').autocomplete(
                {

                    source : function(request, response) {
                        response($.ui.autocomplete.filter(availableTags,
                                extractLast(request.term)));
                    },

                    focus : function() {
                        return false;
                    },
                    select : function(event, ui) {
                        var terms = split(this.value);
                        terms.pop();
                        terms.push(ui.item.value);
                        terms.push(" ");
                        this.value = terms.join(",");
                        return false;
                    }
                });
    }

1 个答案:

答案 0 :(得分:1)

尝试this.value = terms.join(" ")

查看javascript join了解更多详情

试试这个例子



function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits.join(' '))
}

<button onclick="myFunction()">Join</button>
&#13;
&#13;
&#13;

这是根据需要更新的jQuery自动完成插件。你想要改变的只是用空格而不是逗号分割字符串并用空格而不是用逗号连接数组

&#13;
&#13;
$(function() {
    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

    function split(val) {
        return val.split(" "); //Spilt array with space instead of commas
    }

    function extractLast(term) {
        return split(term).pop();
    }

    $("#tags")
        // don't navigate away from the field on tab when selecting an item
        .on("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(" "); //Join array with space instead of commas
                return false;
            }
        });
});
&#13;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
    <label for="tags">Tag programming languages: </label>
    <input id="tags" size="50">
</div>
&#13;
&#13;
&#13;

我希望这是你所期待的解决方案。