使用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。

我会很高兴任何形式的帮助！

来源

2015-03-13 Schwesi

也许你应该返回你的'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

我彻底检查您的问题，终于解决了后援主要问题是您的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格式，就像我上面给出的。

我希望终于完成了。谢谢。

来源

2015-03-13 19:45:33

太棒了！非常感谢！！ – Schwesi 2015-03-13 20:19:43

它工作@kringeltorte？ – 2015-03-13 20:20:30

在测试中它正在工作！在我的项目中还不止。但是你对我的JSON格式是正确的，所以我很确定，只要我弄清楚如何获得格式，它也会在我的项目中工作！最后我知道，问题是什么，现在我知道要研究什么了！非常感谢！ – Schwesi 2015-03-13 20:22:42

第一套自动完成= “上” 您输入字段即

<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(''); 
      } 
     } 
    });

，并保持在$（文件）。就绪（函数（）{。 ....}）;

来源

2015-03-13 16:04:19

谢谢你的回答！不幸的是，它仍然没有工作，我也没有看到它将在哪里调用控制器功能？Source设置为数据或者它是如何工作的？ – Schwesi 2015-03-13 16:13:10

您的答案帮了我很大的忙！如果您能帮助我解决这个最后的障碍，我会感激不尽！ – Schwesi 2015-03-13 16:25:28

你有加载jquery自动完成插件，并保持$（document）.ready（function（）{.....}）内的代码;？ – 2015-03-13 17:33:26

$(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插件。

来源

2015-03-13 17:52:31

谢谢!!我错误地理解了你的代码，我用它代替了我的代码，这就是为什么它对我没有任何意义，现在它变得更有意义了，不幸的是，仍然没有解决我的问题。谢谢你的努力！ – Schwesi 2015-03-13 18:09:27

使用jquery ui自动完成在MVC中搜索JSON输出

回答

相关问题