使用JSON,MySql的Codeigniter自动完成搜索框

时间:2015-03-31 19:19:15

标签: php jquery mysql json codeigniter

我正在尝试创建一个自动填充搜索框但是这段代码不起作用,我正在尝试这三天。我需要一个自动完成搜索结果系统。我尝试了几种方法。但在我看来,我没有得到任何回应或任何错误。键入一个字母后,它不会告诉任何内容

控制器上的代码

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Search extends CI_Controller {
function __construct()
{
    parent::__construct();
}
public function index()
{
    $this->load->view('search');
}

public function getFunction()
{

if ( !isset($_GET['term']) )
 exit;
 $term = $_REQUEST['term'];
    $data = array();
    $rows = $this->model_search->getData($term);
        foreach( $rows as $row )
        {
            $data[] = array(
                'label' => $row->bname.', '. $row->bname,
                'value' => $row->bname); 
        }
    echo json_encode($data);
    flush();

}
}

和型号代码是

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Model_search extends CI_Model {
public function __construct()
{
     parent::__construct();
     // Your own constructor code

}
function getData($term)
{
     $sql = $this->db->query('select * from brands where bname like "'. mysql_real_escape_string($term) .'%" order by bname asc limit 0,10');
return $sql ->result();
 }
 }

查看代码是;

    <html lang="en-US">  
    <head>  
        <title>Codeigniter Autocomplete</title>  
        <link rel="stylesheet" href="<?php echo base_url('assets/css/jquery-ui.css'); ?>" type="text/css" media="all" />  
        <script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>" type="text/javascript"></script>  
        <script src="<?php echo base_url('assets/js/jquery-1.8.3.js'); ?>" type="text/javascript"></script>  
        <meta charset="UTF-8">  


<script type="text/javascript">
$(document).ready(function(){
$(function() {
function split( val ) {
            return val.split( /,\s*/ );
    }
            function extractLast( term ) {
             return split( term ).pop();
    }

    $( "#txtinput" )
        // don't navigate away from the field on tab when selecting an item
          .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function( request, response ) {
                $.getJSON( "<?php echo base_url();?>search/getFunction",{  
                    term: extractLast( request.term )
                },response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 1 ) {
                    return false;
                }
            },
            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>  
<input type="text" id="txtinput" size="20" />        
</body>  
</html>  

0 个答案:

没有答案