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

Typeahead给我错误

1 个答案:

JS：