「追加」ボタンを押す機能を備えた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: オブジェクト [オブジェクト オブジェクト] にメソッド 'split' がありません
どんな考え/提案/答えも大歓迎です。ありがとう!