Question

我正在尝试将以下代码改编为我的应用程序。 Multiple Autocomplete jsfiddle jsfiddle工作 - 我的PHP应用程序没有。

我的应用程序是基于PHP的Xataface应用程序，我已经添加了自定义移动创建页面。我想从mysql获取建议列表。

它适用于第一个建议，然后弹出逗号。

问题：问题是在我的应用程序中它没有显示第二个条目的建议列表（在逗号之后）。

我做了很多谷歌搜索，我没有看到可能帮助我的相关页面。

有人可以帮我看看第二次及以后进入该领域的建议清单吗？

以下是我的代码......

我的表格如下：

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

first suggestion list shows OK.jpg

第二次参赛的建议清单不是show.jpg

suggestion list for second entry is not showing.jpg

Answer 1

当我阅读更多内容并进行更多搜索时，我在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;
    }
  });
});

逗号在一个字段中分隔多个自动完成

1 个答案: