1

我正在尝试使以下代码适应我的应用程序。 多个自动完成 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

第一个建议列表显示 OK.jpg

  • 第二个条目的建议列表未显示.jpg

第二个条目的建议列表未显示.jpg

4

1 回答 1

3

当我阅读更多并搜索更多时，我在 jquery ui 网站上找到了多个远程自动完成代码。有趣的是，您可以长时间搜索和阅读，而不会遇到一些明显有用的信息。

jquery ui 网站 .. 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;
    }
  });
});
于 2013-11-08T03:34:23.440 回答