如何拆分JQuery自动完成多值字符串

时间:2013-04-14 23:20:44

标签: jquery jquery-ui jquery-autocomplete jquery-ui-sortable string-split

我有一个JQuery自动完成功能,能够点击“添加”按钮并在JQuery可排序列表中显示屏幕上的用户输入,但我想将输入的字符串分成多个子字符串,分成“ ,“。这就是我试过的:

$(".addButton").click(function(e) {
    e.preventDefault();
    var item = $("input[name='phoneItem']").val();
    // set var $li to the string inputted by the user
    var $li = $("<li class='ui-state-default'\>").text(item);
    // parses input string, splitting at commas into substrings
    var $liArray = $li.split(", ");
    // adds var $li to the gui
    for (var i = 0; i < $liArray.length; i++) {
        $("#sortable").append($li);
    };

    // refreshes the page so var $li shows up
    $("#sortable").sortable("refresh");
});

这就是我的.html的样子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="stylesheet2.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>-->
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <form class="ui-widget" name="phoneForm"><!--The autocomplete search bar-->
        <input id="tags" size="50" name="phoneItem" placeholder="Add a Phone"/>


        <button class="addButton"><!--The add button-->
            Add
        </button>
        <span class="content"><!-- The sortable list of phones-->
            <ul id="sortable">
              <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
              <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
            </ul>
        </span>
    </form>
</body>

但是我收到了这个错误:

未捕获的TypeError:对象[object Object]没有方法'split'

非常感谢任何想法/建议/答案。谢谢!

2 个答案:

答案 0 :(得分:3)

$li是jQuery对象,它没有任何split方法。尝试从li获取文本并将其拆分:

var t=$li.text();
var $liArray = t.split(", ");

但由于您已在变量item中包含文字,因此您可以将其拆分,而不是再次访问$li

var $liArray = item.split(", ");

答案 1 :(得分:0)

不应该var $li = $("<li class='ui-state-default'\>").text(item);

Be:var $li = $("#tags").val();var $li = $("input[name='phoneItem']").val();

我不认为你的原始行是有效的jQuery,而且它也没有将var $ li设置为用户输入的字符串&#34;。

此行var item = $("input[name='brewItem']").val();似乎没必要,因为变量项在声明后未被使用。