次のコードをアプリケーションに適合させようとしています。 複数 のオートコンプリート jsfiddle jsfiddle は機能しますが、私の PHP アプリケーションは機能しません。
私のアプリケーションは、カスタム モバイル作成ページを追加した PHP ベースの Xataface アプリケーションです。mysql から提案リストを取得したい。
最初の提案では問題なく機能し、コンマでポップします。
問題: 問題は、私のアプリケーションでは、2 番目のエントリ (カンマの後) の候補リストが表示されないことです。
私は多くのグーグル検索を行ってきましたが、私を助ける関連ページが表示されません.
フィールドへの2番目以降のエントリの提案リストを表示するためにこれを取得するのを手伝ってもらえますか?
以下は私のコードです...
私のフォームは次のとおりです。
<!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
- 2 番目のエントリの候補リストが表示されない.jpg
