提前输入错误

Question

正如我的标题所说，我在使用 bootstrap 中的 typeahead 插件时需要一些帮助。我是新手。 让我向您展示我到目前为止所做的尝试。

我的 HTML

<input type="text" class="form-control" data-provide="typeahead" name="pname" id="pname" autocomplete="off">

我的 js

$('#pname').typeahead({
                source: function (query, process) {
                states = [];
                map = {};
                return $.get('/'+url_root_path+'/misc/purchase/source.php', { query: query }, function (data) {
                    console.log(data);  
                    return process(data.pname);
                });
                }
            }); 

我的 Json 是

[{"pname":"Chettinad","id":"1"},{"pname":"mobile","id":"4"},{"pname":"iPhone","id":"14"},{"pname":"jalli","id":"15"},{"pname":"iphone5s","id":"16"},{"pname":"no image","id":"19"}]

我的 PHP 代码是

$req = "SELECT pname, id "
    ."FROM product "
    ."WHERE pname LIKE '%".$_REQUEST['query']."%' ";

$query = mysql_query($req);

while($row = mysql_fetch_array($query))
{
    $results[] = array('pname' => $row['pname'], 'id' => $row['id'] );
}

echo json_encode($results); 

每当我尝试在文本框中输入一些内容时。我在控制台中收到错误

Uncaught TypeError: Cannot read property 'length' of undefined 

请帮帮我。

Answer 1

尝试使用 jQuery $.each 作为预输入，从 json 对象中创建一个 names 数组，如下所示：

JS：

   $('#pname').typeahead({
            source: function (query, process) {
            names = [];
            map = {};
           $.each(data, function (i, obj) {
                map = obj;

                if($.inArray(obj.pname, names)==-1)
                names.push(obj.pname);
            }); 
                 process(names);
            }
        }); 

这是DEMO