How to split a JQuery autocomplete multiple value string

StackOverflow https://stackoverflow.com/questions/16005491

Question

I have a JQuery autocomplete working with the ability to hit the "Add" button and having the user input show up on the screen in a JQuery sortable list, but I want to separate the inputted string into multiple substrings splitting at the ", ". This is what I tried:

$(".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");
});

and this is what my .html looks like:

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

But I get this error:

Uncaught TypeError: Object [object Object] has no method 'split'

Any thoughts/suggestions/answers are greatly appreciated. Thanks!

Était-ce utile?

La solution

Well $li is jQuery object and it does not have any split methods. Try getting text from li and splitting it:

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

But as you already have text contained in variable item, you may split it instead of accessing $li again:

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

Autres conseils

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

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

I don't think your original line is valid jQuery, and also it doesn't "set var $li to the string inputted by the user".

This line var item = $("input[name='brewItem']").val(); seems to be unnecessary as the variable item isn't used after its declaration.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top