使用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輸出

回答

相關問題