jQuery自动完成：如何拆分字符串结果？答案

【问题标题】：jQuery autocomplete: how to split the string result?jQuery自动完成：如何拆分字符串结果？
【发布时间】：2010-04-07 16:09:32
【问题描述】：

我在 .aspx 页面上使用自动完成插件时遇到以下情况。它工作正常。自动完成搜索的结果会产生一个产品 ID，并与它连接一个产品描述（即 2099 -- A Product）。我知道我需要使用 split() 但是我应该把它放在哪里？我对 jQuery 和 javascript 还是比较陌生。

$(document).ready(function() {
  $('.divAutoComplete').autocomplete("LookupCodes.aspx?type=FC", { 
     mustMatch: true 
  });
});

【问题讨论】：

标签： asp.net jquery autocomplete

【解决方案1】：

如果是相同的 autocomplete I've used（作者 Tomas Kirda），您应该可以像这样添加 onSelected 事件：

$(document).ready(function() {
  $('.divAutoComplete').autocomplete("LookupCodes.aspx?type=FC", { 
     mustMatch: true,
     onSelect: function(value, data) { autoCompleteSelected(value, data); }
  });
});

function autoCompleteSelected(value, data) {
    var parts = data.split("--");
 ... do something with parts

}

显然，如果不是，那么它将有不同的事件

【讨论】：

我试试看。我的来自“basstance de”，但似乎我记得有一个 onSelect。在我确定它有效后，会将您标记为答案。谢谢！
这是我的插件：bassistance.de/jquery-plugins/jquery-plugin-autocomplete

【解决方案2】：

在 JavaScript 中，任何字符串都可以使用 split 函数进行拆分，如下所示：

"Pandas enjoy tasty bamboo".split(' ')

上面将字符串拆分为空格，返回以下数组：

["Pandas", "enjoy", "tasty", "bamboo"]

任何字符串都可以提供给 split 函数，它可以很好地处理多字符串。

现在，关于 jQuery 自动完成插件的问题，您需要让 .aspx 页面返回一个 JS 选项数组才能使其正常工作。或者，您可以通过其他方式加载数据，然后将数组传递给自动完成。如果服务器返回如下数组，则可以直接传递：

["1234 -- Chicken", "4321 -- Noodle", "1432 -- Irrational Monkeys"]

关键是自动完成使用数组进行匹配。

docs for the autocomplete plugin 看起来还不错。

【讨论】：

谢谢。我知道如何拆分字符串。我只是不知道如何在自动完成插件的上下文中做到这一点。

【解决方案3】：

执行此代码进行拆分

<script type="text/javascript">
    $(function() {
        var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $("#tags").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>

【讨论】：