Заблокированный запятой множественный автозаполнение в одном поле

Я пытаюсь адаптировать следующий код к моему приложению. Множественный автозаполнение jsfiddle Работает jsfiddle – мое приложение PHP не работает.

Мое приложение – это приложение Xataface на основе PHP, на которое я добавил пользовательскую мобильную страницу для создания. Я хочу получить список предложений из mysql.

Он отлично работает для первого предложения, а затем появляется в запятой.

ПРОБЛЕМА: Проблема в том, что в моем приложении он не отображает список предложений для второй записи (после запятой).

Я сделал много поиска в Google, и я не вижу соответствующих страниц, которые могут мне помочь.

Может кто-нибудь, пожалуйста, помогите мне получить это, чтобы показать список предложений для второй и последующих записей в поле?

Ниже мой код …

Моя форма такова:

<!DOCTYPE html> <html> <head> <title>Create Form Mobile 9</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link rel="stylesheet" href="css/create9form.css" /> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <script type="text/javascript"> // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ initialize validation plugin jquery.validate.min.js $(document).on("pageshow", "#create9Page", function() { $("#cform9").validate(); });</script> <script type="text/javascript"> $(function() { function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $("#tagsf2").autocomplete({ //reference: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/ minLength: 1, source: "actions/tags.php", focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(","); return false; } }); }); </script> </head> <body> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ debugging --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end debugging --> <div data-role="page" id="create9Page"> <div id="errorBox"><ul></ul></div> <form action="index.php" id="cform9" method="POST" data-ajax="false"> <div data-role="fieldcontain"> <label for="notef2">Note:</label> <textarea cols="40" rows="8" name="notef2" id="notef2" class="required"></textarea> </div> <div class="control-group"> <label for="tagsf2">TagsField: </label> <div class="controls"> <input type="text" id="tagsf2" name="tagsf2" autocorrect="off" class="required" /> <!-- <input type="hidden" id="form_submitted" name="form_submitted" value="true" />--> </div> </div> <input type="hidden" name="urlsave" value="<?php echo $url ?>" /> <input type="hidden" name="-action" value="create9note" /> <input type="submit" value="Submit" id="submit" name="submit" data-theme="a" /> </form> </div> </body> </html>

Мой файл tags.php выглядит следующим образом.

 <?php require_once "configphp.dbc"; $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql'); mysql_select_db($dbname); $return_arr = array(); /* If connection to database, run sql statement. */ if ($conn) { $fetch = \mysql_query("SELECT * FROM nte_tags where tags_list like '%" . mysql_real_escape_string($_GET['term']) . "%'"); /* Retrieve and store in array the results of the query. */ while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { $row_array['tags_id'] = $row['tags_id']; $row_array['value'] = $row['tags_list']; //$row_array['abbrev'] = $row['abbrev']; array_push($return_arr, $row_array); } } /* Free connection resources. */ //mysql_close($conn); /* Toss back results as json encoded array. */ echo json_encode($return_arr);

Скриншоты:

Первый список предложений показывает OK.jpg

первый список предложений показывает OK.jpg

Список предложений для второй записи не показан.

список предложений для второй записи не показан.

Когда я читал больше и искал больше, я нашел многозадачный код автозаполнения на веб-сайте jquery ui. Забавно, как вы можете искать и читать в течение длительного времени и не сталкиваться с какой-либо очевидной полезной информацией.

jquery ui website .. http://jqueryui.com/autocomplete/#multiple-remote

Я использовал приведенный ниже пример кода и отредактировал его в соответствии с моим приложением.

Он работает сейчас и решил мою проблему в моем приложении.

 $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // custom minLength var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); });