使用 json 和 bootstrap 自动完成答案

【问题标题】：Auto Complete with json and bootstrap使用 json 和 bootstrap 自动完成
【发布时间】：2013-02-02 05:02:47
【问题描述】：

这是我的代码：

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 of Anime/（是的，使用空间），我需要解决这个问题。

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

快点视频：http://www.screenr.com/plZ7

【问题讨论】：

标签： php json twitter-bootstrap autocomplete

【解决方案1】：

您需要使用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']);
}

为了使名称在搜索自动完成中看起来也不错，您还需要修改 jQuery，将 decodeURIComponent() 函数包裹在 obj 周围，如下所示：

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

【讨论】：