1

У меня есть автозаполнение JQuery, работающее с возможностью нажатия кнопки «Добавить» и появление пользовательского ввода на экране в сортируемом списке JQuery, но я хочу отделить введенная строка в несколько подстрок, расщепляющихся на «,». Это то, что я пробовал:Как разбить строку с несколькими значениями JQuery autocomplete

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

Но я получаю эту ошибку:

Uncaught TypeError: Object [объект Объект] не имеет метода «split»

Любые мысли/предложения/ответы очень ценят д. Благодаря!

ответ

3

Well $li является объектом jQuery и не имеет методов split. Попробуйте получить текст из li и разделив его:

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

Но, как вы уже имеете текст, содержащийся в переменной item, вы можете разделить его вместо доступа к $li снова:

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

Он только имеет входной текст, содержащийся в переменной item, если строка 'var item = $ (" input [name = 'brewItem'] "). val();' изменена на var item = '$ (" input [name = 'phoneItem'] ") .val(); ' –

+0

Спасибо за быстрый ответ! Все отлично работает :) – sbru

0

не должны var $li = $("<li class='ui-state-default'\>").text(item);

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

Я не думаю, что ваша оригинальная строка действительна jQuery, а также не «устанавливает var $ li в строку, введенную пользователем».

Эта строка var item = $("input[name='brewItem']").val(); кажется ненужной, поскольку элемент переменной не используется после ее объявления.