Question

我已经按照本教程进行操作 http://blattchat.com/2013/06/04/twitter-bootstrap-typeahead-js-with-underscore-js-tutorial/ 它在我自己的项目中工作。我设法用id设置一个隐藏字段，并将表单提交到另一个页面。

如何替换“本地”数组，以便从mysql数据库中检索数组。

我也试过了http://www.codingforums.com/showthread.php?t=286412但是我没有让它与设置隐藏字段一起工作。

=============================================== ======================

在尝试了一些额外的事情后，我得到以下工作。

<div class="content">
<form method="post" name="quicksearchform" id="quicksearchform" action="">
<fieldset>
<input type="text" placeholder="Quick search" id="quicksearch" class="quicksearch">
<input type="hidden" id="quicksearchid" name="quicksearchid">
<input type="hidden" id="quicksearchtype" name="quicksearchtype">
</fieldset>
</form>
</div>


<script>
$(function($) {    
    $('.quicksearch').typeahead({
      name: 'quicksearch',
      valueKey: 'name',
  local: [{"id":"1","name":"user1","type":"type1"},
              {"id":"2","name":"user2","type":"type2"}
             ]
      }).on('typeahead:selected', function(event, datum) {
     $('#quicksearchid').val(datum.id);
     $('#quicksearchtype').val(datum.type);
     $('#quicksearchform').submit();
  });
});
</script>

我有一个php文件，它生成的输出与我在本地后放置的输出相同：因此，唯一需要做的就是从php文件（json_encoded）加载数据。

Answer 1

您是否尝试在函数外部定义用于本地选项的信息？我会这样开始解决它。

所以......将这些东西定义为一个名为data的变量。

[
        {
           id: 0,
           name: 'Deluxe Bicycle', 
           price: 499.98
        },
        {
           id: 1,
           name: 'Super Deluxe Trampoline',
           price: 134.99
        },
        {
           id: 2,
           name: 'Super Duper Scooter',
           price: 49.95
        }
     ]

在先行选项......

$('input.product-typeahead').typeahead({
     name: 'products',
     header: '<h3>Products</h3>',
     local: data
});

如果你能做到这一点，那么你可以将数据定义为php变量，在页面的PHP部分匹配这种结构。从数据库中检索信息后，构建所需数据的数组。

$data = array(structure of data you need);

然后json_encode它，这是一个很好的字符串，JavaScript可以解释。

$data = json_encode($data);

然后在JavaScript中使用eval（）或使用jQuery将字符串转换为JavaScript

var data = jQuery.parseJSON(<?php echo $data; ?>);

Answer 2

您需要从JS学习Ajax请求的基础知识，它向您的服务器上的PHP脚本提交POST或GET请求，然后使用用户输入查询MySQL并将MySQL作为JSON或XML返回，但它甚至可能是文字。

我将从：http://jqueryui.com/autocomplete/开始，因为这与typeahead具有相同的功能。

JQueryUI自动完成功能非常易于使用，并且可能有更多用户友好的教程。学习这些方法和JQUI自动完成小部件将允许您使用Typeahead执行所需的操作。

注意：了解正确“清理”用户输入的输入非常重要，然后进入数据库查询。有了这个，总是存在恶意代码被注入您的风险，通常会造成损害或以其他方式危害您的系统。

请参阅：How can I prevent SQL injection in PHP?

Answer 3

我是这样做的。我也为它写了blog post。

index.php文件

  <body>
    <div class="container">
      <input class="typeahead" type="text" data-provide="typeahead" autocomplete="off">
    </div><!-- /.container -->

    <!-- Le javascript -->
    <script src="/assets/jquery/jquery-1.10.2.min.js"></script>
    <script src="/assets/bootstrap/2.3.2/js/bootstrap-typeahead.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $('input.typeahead').typeahead({
        source: function (query, process) {
          $.ajax({
            url: 'data.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + query,
            success: function(data) {
              console.log(data);
              process(data);
            }
          });
        }
      });
    });
    </script>
  </body>
</html>

data.php文件

// check connection
if ($mysqli->connect_errno){
  printf("Connect failed: %s\n", $mysqli->connect_error);
  exit();
}

$query = 'SELECT title FROM typeahead_example';

if(isset($_POST['query'])){
  // Add validation and sanitization on $_POST['query'] here

  // Now set the WHERE clause with LIKE query
  $query .= ' WHERE title LIKE "%'.$_POST['query'].'%"';
}

$return = array();

if($result = $mysqli->query($query)){
  // fetch object array
  while($obj = $result->fetch_object()) {
    $return[] = $obj->title;
  }
  // free result set
  $result->close();
}

// close connection
$mysqli->close();

$json = json_encode($return);
print_r($json);

希望能帮到你，确保你在data.php文件中没有其他任何回应/打印出来，它会把json打乱。如果您想测试data.php响应，请直接转到页面或在浏览器上使用控制台或网络响应。

bootstrap typeahead和mysql数据检索

3 个答案: