0

我遵循了本教程 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 文件，它生成与我在 local: 之后放置的相同的输出。所以唯一要做的就是从 php 文件（json_encoded）加载数据。

4

3 回答 3

0

这是我的做法。我也为此写了一篇博文。

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>

数据.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 响应，请直接转到页面或在浏览器上使用控制台或网络响应。

于 2013-08-10T15:15:02.590 回答
0

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

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

[
        {
           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; ?>);
于 2013-08-10T00:22:21.857 回答
0

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

我将从：http: //jqueryui.com/autocomplete/开始，因为这与预先输入的功能相同。

JQueryUI 自动完成非常易于使用，并且可能有更多用户友好的教程。学习这些方法，JQUI 自动完成小部件将允许您使用 Typeahead 做您需要的事情。

注意：了解如何正确“清理”用户输入的输入非常重要，然后输入到数据库查询中。这样一来，恶意代码总是存在被注入您的系统的风险，通常会导致损坏或以其他方式危及您的系统。

参考：PHP中如何防止SQL注入？

于 2013-08-10T00:23:14.473 回答