Databases
StackOverflow2013
Postsdbo
POHow to split a JQuery autocomplete multiple value string
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to split a JQuery autocomplete multiple value string
    text
    copied!<p>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:</p> <pre><code>$(".addButton").click(function(e) { e.preventDefault(); var item = $("input[name='phoneItem']").val(); // set var $li to the string inputted by the user var $li = $("&lt;li class='ui-state-default'\&gt;").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 &lt; $liArray.length; i++) { $("#sortable").append($li); }; // refreshes the page so var $li shows up $("#sortable").sortable("refresh"); }); </code></pre> <p>and this is what my .html looks like:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="stylesheet2.css"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;--&gt; &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form class="ui-widget" name="phoneForm"&gt;&lt;!--The autocomplete search bar--&gt; &lt;input id="tags" size="50" name="phoneItem" placeholder="Add a Phone"/&gt; &lt;button class="addButton"&gt;&lt;!--The add button--&gt; Add &lt;/button&gt; &lt;span class="content"&gt;&lt;!-- The sortable list of phones--&gt; &lt;ul id="sortable"&gt; &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 1&lt;/li&gt; &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 2&lt;/li&gt; &lt;/ul&gt; &lt;/span&gt; &lt;/form&gt; &lt;/body&gt; </code></pre> <p></p> <p>But I get this error: </p> <p>Uncaught TypeError: Object [object Object] has no method 'split'</p> <p>Any thoughts/suggestions/answers are greatly appreciated. Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload