使用json和bootstrap自动完成

时间:2013-02-17 19:07:06

标签: php json twitter-bootstrap autocomplete

这是我的代码:

class_search.php

        case 'users':
            if(!empty($_REQUEST['user'])){                  
                if(strlen($_REQUEST['user']) >= 3){
                    $_REQUEST['user'] = $this->sanitize($_REQUEST['user'], 'string');
                    $stmt = $this->sql->prepare('SELECT
                                                        id,
                                                        nome,
                                                                                                                    url
                                                    FROM
                                                        animes
                                                    WHERE
                                                        nome LIKE ?

                                                    LIMIT 10');

                    $stmt->execute(array('%'.$_REQUEST['user'].'%'));
                    $this->queries++;
                    $c = 0;
                    if($admin){
                        $result['users'] = array();
                    }

                    if($stmt->rowCount() > 0){
                        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                            if($admin){
                                $result['users'][$c] = array('name'=>($prefix ? '[usr] ' : '').$row['nome'], 'id'=>$row['id']);
                                $c++;
                            }else{
                                $result[] = ($prefix ? '[usr] ' : '').$row['nome'];
                            }
                        }
                    }
                }
            }
            break;

general.js

$('#top_search').typeahead({
    source: function(typeahead, query) {
        $.ajax({
            url: baseurl + "/ajax_calls.php",
            dataType: "json",
            type: "POST",
            data: {
                call: 'top_search',
                user: query
            },
            success: function(data) {
                typeahead.process(data);
            }
        });
    },
    onselect: function(obj) {
        location.href= baseurl + '/animes/'+obj;
    }
})

ajax_calls.php

        case 'top_search':
            $status = $site->process_autosearch('users');
            break

;

我有onselect的问题,我需要在MySQL中选择行url并编码为json,因为当我点击一个结果时我会重定向到动画的mysite.com/animes/name /(是的,带有空间)我需要解决这个问题。

phpMyAdmin中的表格动画: http://s18.postimage.org/3ulrcmss9/Animes_Table.jpg

快速视频:http://www.screenr.com/plZ7

1 个答案:

答案 0 :(得分:0)

您需要使用urlencode()。 在class_search.php文件中,更新此部分:

if($admin){
    $result['users'][$c] = array('name'=>($prefix ? '[usr] ' : '').urlencode($row['nome']), 'id'=>$row['id']);
    $c++;
}else{
    $result[] = ($prefix ? '[usr] ' : '').urlencode($row['nome']);
}

为了使名称在searche自动完成中看起来也很好,你还需要修改你的jQuery,将decodeURIComponent()函数包装在obj周围,如下所示:

onselect: function(obj) {
    location.href= baseurl + '/animes/' + decodeURIComponent(obj);
}