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>

local: の後に置いたのと同じ出力を生成する php ファイルがあります。したがって、実行する必要があるのは、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>

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 の応答をテストする場合は、ページに直接移動するか、ブラウザでコンソールまたはネットワークの応答を使用します。

于 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 リクエストの基礎を学ぶ必要があります。JS はサーバー上の PHP スクリプトに POST または GET リクエストを送信し、ユーザー入力を使用して MySQL をクエリし、通常は MySQL を JSON または XML として返しますが、テキストであっても。

http://jqueryui.com/autocomplete/から始めます。これは、先行入力と同じ機能であるためです。

JQueryUI オートコンプリートは非常に使いやすく、ユーザー フレンドリーなチュートリアルが用意されている可能性があります。これらのメソッドと JQUI Autocomplete ウィジェットを学習すると、Typehead で必要なことを実行できるようになります。

注: ユーザーが入力した入力を適切に「サニタイズ」する方法を学ぶことは非常に重要です。入力はデータベース クエリに組み込まれます。これにより、悪意のあるコードが挿入されてシステムに損害を与えたり、システムを危険にさらしたりするリスクが常にあります。

参照: PHP で SQL インジェクションを防ぐにはどうすればよいですか?

于 2013-08-10T00:23:14.473 に答える