使用jquery ui自动完成在MVC中搜索JSON输出
我正在尝试使用jquery ui自动填充小部件来搜索我的用户表。
从我的用户表,这两个领域,我想寻找:
使用jquery ui自动完成在MVC中搜索JSON输出
TABLE `users`
`user_name` varchar(64) COLLATE utf8_unicode_ci NOT NULL,
`user_email` varchar(64) COLLATE utf8_unicode_ci NOT NULL
视图
<script>
$(function() {
$.ajax({
url: "/friend/showFriends", //the function in the controller
dataType: "json",
success: function(response){
var data = $(response).map(function(){
return {value: this.friend_usernames}; //I am pretty sure this is not correct?
}).get();
console.log(data);
$("#searchFriends").autocomplete({
source: data,
minLength: 1
});
});
});
});
</script>
<input type="search" id="searchFriends" placeholder="find friends"/>
控制器
/**
* Show friends
*/
public function showFriends()
{
$this->View->render('friend/index', array(
'privateFriends' => FriendModel::displayFriends(),
'searchFriends' => FriendModel::searchUsers()
));
}
模型
/**
* Search users table
*/
public static function searchUsers()
{
//if(isset($_GET['term'])) { /* Commented out for testing */
$database = DatabaseFactory::getFactory()->getConnection();
$query = $database->prepare("SELECT * FROM users WHERE (user_name LIKE :term or user_email LIKE :term) ORDER BY user_id LIMIT 5");
$query->execute(array(':term' => '%'.$_GET['term'].'%'));
$friends = $query->fetchAll();
$friend_usernames = array();
foreach($friends as $friend) {
$friend_usernames[] = $friend->user_name;
$friend_usernames[] = $friend->user_email;
}
/* output results as json encoded array. */
echo json_encode($friend_usernames);
//}
}
输出
说明:未定义指数:术语
[ “USER1”, “[email protected]”, “user2”,“[email protected]”]
所以我能够在网站上输出JSON,但是我无法使用自动填充小部件搜索它!
请问有人可以帮我吗?
我没有使用任何一种框架或cms。
我会很高兴任何形式的帮助!
我彻底检查您的问题,终于解决了后援主要问题是您的JSON格式正在添加不应该properly.It进来这种格式能正常工作 -
[
{
"user_name": "user1",
"user_email": "[email protected]"
},
{
"user_name": "user2",
"user_email": "[email protected]"
}
]
不知怎的,我公司生产的JSON与PHP的帮助不是通过数据库,不管可能是什么,它都是通过AJAX通过'url'部分来实现的。
那么通过PHP我给用于测试的代码检查---
data.php
<?php
$friend=array(
array("user_name"=>"user1","user_email"=>"[email protected]"),
array("user_name"=>"user2","user_email"=>"[email protected]")
);
echo json_encode($friend);
?>
和完整的HTML和JavaScript代码一起
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var data=[];
$.ajax({
url: "data.php", //the function in the controller
dataType: "json",
success: function(response){
//console.log(response);
$.each(response, function(i,val){
data.push(""+val.user_name+"");//to display names in auto-complete
data.push(""+val.user_email+"");//to display emails in auto-complete
});
},
});
$("#searchFriends").focus(function(){
$("#searchFriends").autocomplete({
autoFocus: true,
source:data,
minLength: 1,
select: function(event, ui){
//do something
//autofocus:true
},
autoFocus: true,
mustMatch: true,
html: false,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index",2000);
}
});
}).change(function() {
if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
if($('.ui-autocomplete').length) {
//$("#searchFriends").val('');
}
}
});
});
</script>
</head>
<body>
<div class="col-md-3">
<input type="search" id="searchFriends" class="form-control" placeholder="find friends" autocomplete="on"/>
</div>
</body>
</html>
所以,就是这样,它工作正常。
要测试它---
1>创建一个'index.html'文件并将html和javascript代码复制到它中,所有链接都从cdn中获取,只需要互联网coinnection。
2>创建一个'data.php'文件并将php代码复制到其中,并将该文件与'index.html'保存在同一个文件夹中。不需要数据库(用于测试目的)。
3>运行它。
N.B。***为了得到你的数据库的结果,你需要使你的传入JSON格式,就像我上面给出的。
我希望终于完成了。谢谢。
第一套自动完成= “上” 您输入字段即
<input type="search" id="searchFriends" placeholder="find friends" autocomplete="on"/>
然后编写JavaScript作为
$("#searchFriends").focus(function(){
$("#searchFriends").autocomplete({
autoFocus: true,
source:data,
minLength: 3, //search after two characters
select: function(event, ui){
//do something
//autofocus:true
},
autoFocus: true,
mustMatch: true,
html: false,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index",2000);
}
});
}).change(function() {
if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
if($('.ui-autocomplete').length) {
//$("#searchFriends").val('');
}
}
});
,并保持在$(文件)。就绪(函数(){。 ....});
$(document).ready(function(){
var data=[];
$.ajax({
url: "/friend/showFriends", //the function in the controller
dataType: "json",
success: function(response){
$.each(response, function(i,val){
data.push(""+val.friend_usernames+"");
});
},
});
$("#searchFriends").focus(function(){
$("#searchFriends").autocomplete({
autoFocus: true,
source:data,
minLength: 3, //search after two characters
select: function(event, ui){
//do something
//autofocus:true
},
autoFocus: true,
mustMatch: true,
html: false,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index",2000);
}
});
}).change(function() {
if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
if($('.ui-autocomplete').length) {
//$("#searchFriends").val('');
}
}
});
});
和HTML
<input type="search" id="searchFriends" placeholder="find friends" autocomplete="on"/>
这就是我能do.This工作对我来说很好,但对于其他数据库,确保你从AJAX调用适当让JSON和你有jQuery的自动完成插件和jquery-ui-custom.xxxjs以及jquery自动完成的css插件。
谢谢!!我错误地理解了你的代码,我用它代替了我的代码,这就是为什么它对我没有任何意义,现在它变得更有意义了,不幸的是,仍然没有解决 我的问题。谢谢你的努力! – Schwesi 2015-03-13 18:09:27
也许你应该返回你的'json_encode($ friend_usernames)'而不是echo。如果这不起作用,请尝试对Javascript数组进行硬编码以确保自动完成自身工作 – Flame 2015-03-13 15:42:05
非常感谢您的回答!返回而不是回声没有帮助。我现在会尝试你的第二个建议。 – Schwesi 2015-03-13 15:53:48
自动完成本身正在工作。我有这样的感觉,这部分是问题所在:var data = $(response).map(function(){ return {value:this.friend_usernames}; – Schwesi 2015-03-13 16:10:42