Question

我正在尝试使用带有typeahead.js的bootstrap v3.0.0实现搜索栏下拉列表。我的搜索栏将带有学生的名字和姓氏。我正在使用一个MYSQL数据库，该数据库由一个名为practice的表组成，其中包含afirstname，alastname，aid作为列。搜索栏不仅应包含下拉列表中的名字和姓氏，还应包含第二行中与其关联的ID。我已经阅读了typeahead.js页面上的所有示例，但我无法使用ajax调用。

以下是我的 index.php 的代码。

的 JS

<script type="text/javascript">

      $(document).ready(function() {
        $('.cr.typeahead').typeahead({
          source:  header: '<h3>Select</h3>',
          name: 'accounts',

          source: function (query, process) {
                return $.getJSON(
                    'localhost/resultly/source.php',
                    { query: query },
                    function (data) {
                        return process(data);
                    });
        });
      });
    </script>

HTML：

     <body>
     <div class="container">

     <br/><br/>

    <input type="text" name="query" class="form-control cr typeahead" id="firstname" />

    <br/><br/>



    </div>
    </body>

source.php 的代码：这应该以json字符串或对象的形式从我的数据库返回firstname和lastname？

<?php 
    $query = $_POST['query'];

    try {


        $conn = new PDO('mysql:host=localhost;dbname=practice','root','');
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


        $stmt = $conn->prepare("SELECT * FROM actualtable WHERE afirstname LIKE '%($query)%'");
        $stmt->execute();





    } 

    catch (PDOException $e) {
        echo 'ERROR:' . $e->getMessage();
    }



    foreach ($stmt as $row) {
            $afirstname[] = $row['afirstname'];
            $alastname[] = $row['alastname'];


    }

    echo json_encode($afirstname);
    echo json_encode($alastname);


 ?>

结果： http://oi41.tinypic.com/50moi1.jpg

什么都没有出现。我尝试添加prefetch:

 prefetch: {
                url: 'localhost/resultly/source.php',
                filter: function(data) {
                r1 = [];
                for (var i = 0;  i < data.length;  i++) {
                r1.push({
                value: data[i].afirstname,
                tokens: [data[i].afirstname, data[i]alastname],
                afirstname: data[i].afirstname,
                alastname: data[i].alastname,
                template: '<p>{{afirstname}} - {{alastname}}</p>',
                });
            }
            return r1;
        }
    }

请提供我可以参考的解决方案或示例。

更新：

source.php应该返回一个json编码数据列表。我通过查看source.pho创建的输出进行调试。我做错了什么，每当我打算输入一个网址localhost/source.php而不是source.php时。

Bass Jobsen提供的解决方案有效，现在我遇到了另一个问题。

我正在使用 if(isset($_POST['query'])) { $q_uery = $_POST['query']; $query = ucfirst(strtolower($q_uery))};

获取用户的数据并将其用于搜索逻辑 $stmt = $conn->prepare("SELECT * FROM actualtable WHERE afirstname LIKE '%($query)%'");

更新后的source.php为http://pastebin.com/T9Q4m10g

我在这行上收到错误说明：未定义的变量：stmt我猜$ query没有被初始化。我如何让它工作。感谢。

更新3

我使用了prefetch：而不是'remote：'来完成所有匹配。

Answer 1

您的回报不正确：

echo json_encode($afirstname);
echo json_encode($alastname);

参见例如Twitter TypeAhead.js not updating input

试试echo json_encode((object)$stmt);，请参阅：typeahead.js search from beginng

<强>更新

我试过echo json_encode（（object）$ stmt）;仍然无效。

您使用任何类型的调试吗？什么source.php返回？尝试按照以下步骤操作没有过滤器的typeahead.js search from beginng。

HTML：

<div class="demo">
  <input class="typeahead" value="" type="text" spellcheck="off" autocomplete="off" placeholder="countries">
</div>

的javascript：

$('.typeahead').typeahead({                                
        remote: 'http://testdrive/source.php?q=%QUERY',
        limit: 10                                                                   
        });

php（source.php）：

<?php
$people = array();
$people[] = array("lastname"=>"Inaw",
    "firstname"=>"Dsajhjkdsa");
$people[] = array("lastname"=>"Dsahjk",
    "firstname"=>"YYYsgbm");
$people[] = array("lastname"=>"Dasjhdsjka",
    "firstname"=>"JHJKGJ");

$datums = array();  
foreach($people as $human)
{
    $datums[]=(object)array('value'=>$human['firstname'],'tokens'=>array($human['firstname'],$human['lastname']));
}     

echo json_encode((object)$datums);

这应该有效

<强> UPDATE2

谢谢，它有效。如何显示2个或更多“值”？

在source.php中为您的基准添加一些值：

foreach($people as $human)
{
    $datums[]=(object)array
    (
        'value'=>$human['firstname'],
        'tokens'=>array($human['firstname'],$human['lastname']),
        'firstname'=>$human['firstname'],
        'lastname'=>$human['lastname']
    );
}

firstname和lastname现在是您在模板中使用的字段

在您的javascript声明中添加模板和模板引擎：

$('.typeahead').typeahead({                                
        remote: 'http://testdrive/source.php?q=%QUERY',
        limit: 10,
          template: [ 
          '<p>{{firstname}} - {{lastname}}</p>'    
          ].join(''),
          engine: Hogan 

        });

以上使用https://github.com/twitter/hogan.js。您必须通过javascript包含模板引擎，例如：

<script src="http://twitter.github.io/typeahead.js/js/hogan-2.0.0.js"></script>

Answer 2

这对我有用。请按照以下步骤操作。

请添加以下Js并提供适当的参考。

bootstrap3-typeahead

--- Ajax Call ----

$("#cityId").keyup(function () {
    var al = $(this).val();
    $('#cityId').typeahead({
        source: function (valuequery, process) {
            var states = [];
            return $.ajax({
                url: http://localhost:4000/GetcityList,
                type: 'POST',
                data: { valueType: "", valueFilter: valuequery },
                dataType: 'JSON',
                success: function (result) {
                    var resultList = result.map(function (item) {
                        states.push({
                            "name": item.Value,
                            "value": item.Key
                        });
                    });

                    return process(states);
                }
            });
        },
    });
});

---- Cs Code ---

public JsonResult SearchKeyValuesByValue(string valueType, string valueFilter)
        {
            List<KeyValueType> returnValue = SearchKeyValuesByValue(valueType, valueFilter);
            return Json(returnValue);
        }

Bootstrap打印头的自动建议将仅接受＆＃34; name＆＃34;和＆＃34;价值＆＃34;所以根据情况创建响应

使用AJAX源的Bootstrap Typeahead（不工作）

2 个答案: