twitter bootstrap ketik ajax contoh

Saya mencoba menemukan contoh yang berfungsi dari elemen ketikahead bootstrap twitter yang akan membuat panggilan ajax untuk mengisi dropdown itu.

Saya memiliki contoh autocomplete jquery yang sudah ada yang mendefinisikan url ajax dan bagaimana memproses balasannya

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Apa yang perlu saya ubah untuk mengonversikan ini ke contoh typeahead?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Saya akan menunggu masalah ' Tambahkan dukungan sumber jarak jauh untuk typeahead ' diselesaikan.

Sunting: typeahead tidak lagi dibundel dalam Bootstrap 3. Periksa:

• Di mana modul JavaScript typeahead di Bootstrap 3 RC 1?
• typeahead.js

Mulai dari Bootstrap 2.1.0 hingga 2.3.2, Anda dapat melakukan ini:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

Untuk mengkonsumsi data JSON seperti ini:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

Perhatikan bahwa data JSON harus dari tipe mime yang tepat (aplikasi / json) sehingga jQuery mengenalinya sebagai JSON.

Anda dapat menggunakan garpu BS Typeahead yang mendukung panggilan ajax. Maka Anda akan dapat menulis:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

Mulai dari Bootstrap 2.1.0:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

Sekarang Anda dapat membuat kode terpadu, menempatkan tautan "json-request" dalam kode HTML Anda.

Semua tanggapan merujuk pada BootStrap 2 typeahead, yang tidak lagi ada di BootStrap 3.

Untuk siapa pun yang diarahkan di sini mencari contoh AJAX menggunakan Twitter postah -Bootstrap typeahead.js baru , inilah contoh yang berfungsi. Sintaksnya sedikit berbeda:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

Contoh ini menggunakan saran sinkron (panggilan ke processSync ) dan asinkron, sehingga Anda akan melihat beberapa opsi segera muncul, lalu yang lain ditambahkan. Anda bisa menggunakan satu atau yang lain.

Ada banyak acara bindable dan beberapa opsi yang sangat kuat, termasuk bekerja dengan objek daripada string, dalam hal ini Anda akan menggunakan fungsi tampilan kustom Anda sendiri untuk membuat item Anda sebagai teks.

Saya telah menambahkan plugin Bootstrap typeahead asli dengan kemampuan ajax. Sangat mudah digunakan:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

Inilah repo github: Ajax-Typeahead

Saya melakukan beberapa modifikasi pada jquery-ui.min.js:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

dan tambahkan css berikut

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

Bekerja dengan sempurna.

Saya menggunakan metode ini

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

Seseorang dapat membuat panggilan dengan menggunakan Bootstrap. Versi saat ini tidak memiliki masalah pembaruan sumber. Pemutakhiran yang bermasalah Sumber data bootstrap typeahead dengan respons pos , yaitu sumber bootstrap yang pernah diperbarui dapat dimodifikasi lagi.

Lihat contoh di bawah ini:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

Bagi mereka yang mencari versi coffeescript dari jawaban yang diterima:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

Saya telah melalui posting ini dan semuanya tidak ingin bekerja dengan benar dan akhirnya mengumpulkan bit dari beberapa jawaban jadi saya memiliki demo kerja 100% dan akan menempelkannya di sini untuk referensi - tempelkan ini ke dalam file php dan pastikan termasuk dalam tempat yang tepat.

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

Coba ini jika layanan Anda tidak mengembalikan header jenis konten aplikasi / json yang tepat:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

PEMBARUAN: Saya memodifikasi kode saya menggunakan garpu ini

juga alih-alih menggunakan $ .each, saya mengubah ke $ .map seperti yang disarankan oleh Tomislav Markovski

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

Namun saya menghadapi beberapa masalah dengan mendapatkan

UnEught TypeError: Tidak dapat memanggil metode 'toLowerCase' dari undefined

seperti yang Anda lihat pada posting yang lebih baru, saya mencoba mencari tahu di sini

semoga pembaruan ini dapat membantu Anda ...

Saya tidak memiliki contoh yang baik untuk Anda dan saya juga tidak memiliki solusi yang sangat bersih, tetapi izinkan saya memberi tahu Anda apa yang saya temukan.

Jika Anda melihat kode javascript untuk TypeAhead terlihat seperti ini:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

Kode ini menggunakan metode "grep" jQuery untuk mencocokkan elemen dalam array sumber. Saya tidak melihat tempat yang bisa Anda hubungi dengan panggilan AJAX, jadi tidak ada solusi "bersih" untuk ini.

Namun, satu cara yang bisa Anda lakukan adalah mengambil keuntungan dari cara metode grep bekerja di jQuery. Argumen pertama untuk grep adalah array sumber dan argumen kedua adalah fungsi yang digunakan untuk mencocokkan array sumber (perhatikan Bootstrap memanggil "pencocokan" yang Anda berikan saat menginisialisasi). Apa yang bisa Anda lakukan adalah mengatur sumber ke array satu elemen dummy dan mendefinisikan pencocokan sebagai fungsi dengan panggilan AJAX di dalamnya. Dengan begitu, ia akan menjalankan panggilan AJAX sekali saja (karena array sumber Anda hanya memiliki satu elemen di dalamnya).

Solusi ini bukan hanya peretasan, tetapi akan mengalami masalah kinerja karena kode TypeAhead dirancang untuk melakukan pencarian pada setiap penekanan tombol (panggilan AJAX harus benar-benar hanya terjadi pada setiap beberapa penekanan tombol atau setelah waktu idle tertentu). Saran saya adalah untuk mencobanya, tetapi tetap dengan perpustakaan autocomplete yang berbeda atau hanya gunakan ini untuk situasi non-AJAX jika Anda mengalami masalah.

saat menggunakan ajax, coba $.getJSON()alih-alih $.get()jika Anda memiliki masalah dengan tampilan hasil yang benar.

Dalam kasus saya, saya hanya mendapatkan karakter pertama dari setiap hasil ketika saya menggunakan $.get(), meskipun saya menggunakan json_encode()sisi server.

saya gunakan $().one() untuk menyelesaikan ini; Ketika halaman dimuat, saya mengirim ajax ke server dan menunggu untuk selesai. Kemudian berikan hasil ke fungsi. $().one()adalah penting. Karena memaksa typehead.js untuk melampirkan input satu kali. maaf atas tulisan yang buruk.

(($) => {
    
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;
          // an array that will be populated with substring matches
          matches = [];
      
          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');
      
          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              matches.push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

 $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

?>