带有AJAX源的Bootstrap Typeahead（不工作）

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

下面是我的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：这应返回来自我da的名字和姓氏tSQL以json字符串或对象的形式？

<?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我猜这个$查询没有被初始化。我如何得到这个工作。谢谢。

更新3

我用预取：将 '远程：' 那个做了所有的匹配。

来源

2013-12-09 Nick_inaw

你的回报是不正确的：

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

见例如Twitter TypeAhead.js not updating input

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

更新

我试着回声json_encode（（ OB ject）$ 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现在场你在你的模板CSN使用

添加模板，模板引擎到您的JavaScript声明：

以上利用https://github.com/twitter/hogan.js。你将不得不通过JavaScript来包含模板引擎，例如：

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

来源

2013-12-09 13:48:19

我tr ied'echo json_encode（（object）$ stmt）;'仍然不起作用。 –

谢谢，它工作。我如何显示2个或更多“值”？我想尝试一下： '$ datums [] =（object）array（'value'=> array（$ human ['firstname']，$ human ['lastname']），'tokens'=> array（$ human ['firstname']，$ human ['lastname']））;' 不起作用。我是否需要使用模板：？ –

它的工作，无论如何，我可以听我的输入字段吗？然后用LIKE'用户数据'把这个值放在我的WHERE子句中。我尝试了$ _POST []，但是这不起作用，如更新后的问题所述。 –

这是为我工作。请按照以下步骤操作。

请在下面添加Js并给出适当的参考。

bootstrap3-typeahead

--- AJAX调用----

$("#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); 
       } 
      }); 
     }, 
    }); 
});

----铯代码---

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

自动提示引导typehead会得到接受只有“名称”和“价值”才能创造回应

来源

2017-05-12 14:18:56 Ankit

带有AJAX源的Bootstrap Typeahead（不工作）

回答

相关问题