Question

我目前正在开展一个小项目，其主要目的是创建一个好看的用户界面，并授予用户在给定数据库上进行搜索的选项。

我有一个工作的CodeIgniter框架，它运行在php5上，并与MySQL服务器集成，现在只存储用户和密码。此外，我有一个登录界面，成功登录后授予主页（我知道......不多，显然不值得骄傲）。

在用户主页中，我想创建一个好看的实时搜索界面，允许用户执行基于以下标准的自定义搜索查询：位置，关键字，类别和时间。

从以上信息可以得出结论，我是新手。他是对的。我对PHP知之甚少，我认为这个项目是学习它的好机会。

我没有要求完整的代码。我只想要一些例子，解释，灵感，想法和学习的地方。

那就是全部！

非常感谢！

----------------------------------------------- - - - - - - - 编辑 - - - - - - - - - - - - - - - - - - ---------------------------

行。所以...我遵循了这个指南： http://www.technicalkeeda.com/jquery/live-search-using-jquery-ajax-php-codeigniter-and-mysql

并没有任何效果。我更新了一些我的眼睛捕获的行作为旧的CodeIgniter语法，它仍然无效。

这是“我的”代码：

控制器 - Person.php

<?php
class Person extends CI_Controller {

 function __construct(){
  parent::__construct();
  $this->load->model('Person_model');
 }

 public function index(){
  $search = $this->input->post('search');
  $query = $this->Person_model->getPerson($search);
  echo json_encode ($query);
 }
}
?>

模型 - Person_model.php

<?php
class Person_model extends CI_Model {

public function getPerson($search){
  $this->load->database();
  $query = $this->db->query("SELECT * FROM People where last_name like '%$search%' ");
  return $query->result();
 }
?>

查看 - home.php

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
#search {
 background-color: lightyellow;
 outline: medium none;
 padding: 8px;
 width: 300px;
 border-radius: 2px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 border: 2px solid orange;
}

ul {
 width: 300px;
 margin: 0px;
 padding-left: 0px;
}

ul li {
 list-style: none;
 background-color: lightgray;
 margin: 1px;
 padding: 1px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}
</style>
<script type="text/javascript" language="javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>
<script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/json2.js"></script>
<script>
 $(document).ready(function(){
   $("#search").keyup(function(){
  if($("#search").val().length>3){
  $.ajax({
   type: "post",
   url: "http://localhost/index.php/Person",
   cache: false,    
   data:'search='+$("#search").val(),
   success: function(response){
    $('#finalResult').html("");
    var obj = JSON.parse(response);
    if(obj.length>0){
     try{
      var items=[];  
      $.each(obj, function(i,val){           
          items.push($('<li/>').text(val.LAST_NAME + " " + val.ID));
      }); 
      $('#finalResult').append.apply($('#finalResult'), items);
     }catch(e) {  
      alert('Exception while request..');
     }  
    }else{
     $('#finalResult').html($('<li/>').text("No Data Found"));  
    }  

   },
   error: function(){      
    alert('Error while request..');
   }
  });
  }
  return false;
   });
 });
</script>
</head>
<body>
<h1>Welcome <?= $this->session->userdata('username') ?></h1>
<a href="<?= site_url('home/logout') ?>">Logout</a>
<div id="container">
<p>Note:- Search by last name!</p>
<input type="text" name="search" id="search" />
<ul id="finalResult"></ul>
</div>
</body>
</html>

我收到一个警告框，上面写着：'请求时出错..'

我该怎么办？

随意对我说话并向我提问我可能不知道答案的问题。

非常感谢任何帮助！

Answer 1

好的问题解决了！对于那些要解决我过去两天的挫败感的人，不要再害怕了！你要做的是将以下代码放在你的控制器中（我的是Person.php）：

  $this->output->set_header("Access-Control-Allow-Origin: *");
  $this->output->set_header("Access-Control-Expose-Headers: Access-Control Allow-Origin");
  $this->output->set_status_header(200);
  $this->output->set_content_type('application/json; charset=utf-8');
  $this->output->_display();

粗略地说，这允许从不同站点发送和接收数据。您可以阅读更多相关信息 here 。之后，您必须将dataType: 'json'添加到发送查询的页面并获取已解析的json响应（我的是视图 - ＆gt; home.php）。

希望这会有所帮助！

Answer 2

我正在尽力帮助您解决问题

控制器 - Person.php

<?php
class Person extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->model('Person_model');    /* Model is called in controller */
    }

    /**
     * Function disc : function for get value from user input by post method 
     * $this->input->post (Codeigniter ) is equivalent to $_POST (Core PHP)
    */

    public function index() {
        $search = $this->input->post('search');
        $query = $this->Person_model->get_person($search); 
        echo json_encode($query);
    }
}
?>

型号 - Person_model.php

<?php
class Person_model extends CI_Model {

    /* Function for get searched data from database */
    public function get_person($search=NULL) {
        $this->db->select('*');
        $this->db->from('People'); /* "People as database table name" */
        $this->db->like('last_name', $search);
        $query = $this->db->get()->result();

        if(!empty($query)) {
            return $query;
        } else {
            return FALSE;
        }
    }
}
?>

查看 - home.php

<html>
    <head>
    <title>Home</title>
    <style>
        #search {
             background-color: lightyellow;
             outline: medium none;
             padding: 8px;
             width: 300px;
             border-radius: 2px;
             -moz-border-radius: 3px;
             -webkit-border-radius: 3px;
             border-radius: 3px;
             border: 2px solid orange;
        }

        ul {
            width: 300px;
            margin: 0px;
             padding-left: 0px;
        }

        ul li {
            list-style: none;
            background-color: lightgray;
            margin: 1px;
            padding: 1px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
    </style>

    <!--Use jQuery CDN service for JQuery Ajax -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <!--End-->
    <script>
        $(document).ready(function(){
            $("#search").keyup(function(){
                if($("#search").val().length>3){
                    $.ajax({
                        type: "post",
                        url: "http://localhost/index.php/Person",
                        cache: false,    
                        data:'search='+$("#search").val(),
                        success: function(response){
                            $('#finalResult').html("");
                            var obj = JSON.parse(response);
                            if(obj.length>0){
                                try{
                                    var items=[];  
                                    $.each(obj, function(i,val){           
                                        items.push($('<li/>').text(val.LAST_NAME + " " + val.ID));
                                    }); 
                                    $('#finalResult').append.apply($('#finalResult'), items);
                                }catch(e) {  
                                    alert('Exception while request..');
                                }  
                            }else{
                                     $('#finalResult').html($('<li/>').text("No Data Found"));  
                                }  
                            },
                            error: function(){      
                                alert('Error while request..');
                            }
                        });
                    }
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <h1>Welcome <?php echo $this->session->userdata('username') ?></h1>
        <a href="<?php echo site_url('home/logout') ?>">Logout</a>
        <div id="container">
            <p>Note:- Search by last name!</p>
            <input type="text" name="search" id="search" />
            <ul id="finalResult"></ul>
        </div>
    </body>
</html>

检查控制台以调试与ajax相关的错误

Answer 3

了解您的问题。现在，对于任何Web应用程序，实时搜索都非常酷且外观漂亮。您可以非常轻松地为Web应用程序创建一个。请按照以下步骤进行恐慌。

<强> HTML

MyClass1::MyClass1() : object(1000) {}

JQuery

<div class="col-md-4 col-md-offset-4 ui-widget"> 
     <label for="tags">Search: </label> 
     <input id="tags">    
</div>

控制器

 $( function() {    
        $( "#tags" ).autocomplete({      
            source: function(request, response) {
                $.ajax({
                    url: 'ajax_autocomplete_demo',
                    dataType: "json", 
                    data: request, 
                    success: function (data) {
                        if (data.length == 0) {
                            alert('No entries found!');              
                        }else {                
                            response(data);                          
                        }
                      }
                 });      
             },    
         });  
     });

<强>模型

public function ajax_autocomplete_demo(){
        $searchText = $_GET['term'];
        $availableResults = $this->user_model->get_autocomplete_results($searchText);

        if(!empty($availableResults)){            
            foreach ($availableResults as $key => $value) {                
                $searchData[] = $value['country'];
            }        
        }else{
            $searchData[] = '';
        }

        echo json_encode($searchData); 
     }

以上代码只是实时搜索背后的登录信息。如果您需要详细解决方案，请遵循此link。对此有一个非常好的解释。

使用CodeIgniter，php5和MySQL

3 个答案:

我正在尽力帮助您解决问题