twitter bootstrap typeahead ajax örneği

Açılışını doldurmak için ajax çağrısı yapacak twitter bootstrap typeahead öğesinin çalışan bir örneğini bulmaya çalışıyorum .

Ajax url ve nasıl yanıt işleme tanımlayan varolan bir çalışma jquery otomatik tamamlama örneği var

<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];
                }
            );
       ..

Bunu typeahead örneğine dönüştürmek için neye ihtiyacım var?

<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];
                }
            );
       ..

' Yazı tipine uzaktan kaynak desteği ekle ' sorununun çözülmesini bekleyeceğim .

Düzenleme: typeahead artık Bootstrap 3'te bulunmuyor.

• Bootstrap 3 RC 1'deki typeahead JavaScript modülü nerede?
• typeahead.js

Bootstrap 2.1.0'dan 2.3.2'ye kadar şunları yapabilirsiniz:

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

JSON verilerini şöyle kullanmak için:

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

JSON verilerinin doğru mime türünde (application / json) olması gerektiğine dikkat edin, böylece jQuery bu verileri JSON olarak tanır.

Sen kullanabilirsiniz BS typeahead çatal ajax çağrıları destekler. Sonra şunları yazabileceksiniz:

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

Bootstrap 2.1.0'dan itibaren:

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);
            }
        });
    }
});

Artık, HTML kodunuza "json-request" bağlantıları yerleştirerek birleşik bir kod oluşturabilirsiniz.

Tüm yanıtlar, artık BootStrap 3'te bulunmayan BootStrap 2 yazım tipine başvuruyor.

Burada yeni Bootstrap sonrası Twitter typeahead.js kullanarak AJAX örneği arayan herkes için işte çalışan bir örnek. Sözdizimi biraz farklıdır:

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

Bu örnek hem eşzamanlı ( processSync çağrısı ) hem de eşzamansız öneri kullanır, böylece bazı seçeneklerin hemen göründüğünü görürsünüz, diğerleri eklenir. Sadece birini veya diğerini kullanabilirsiniz.

Dizeler yerine nesnelerle çalışma da dahil olmak üzere çok sayıda düzenlenebilir etkinlik ve bazı çok güçlü seçenekler vardır; bu durumda öğelerinizi metin olarak oluşturmak için kendi özel görüntüleme işlevinizi kullanırsınız.

Ajax yetenekleri ile orijinal typeahead Bootstrap eklentisini artırdım. Kullanımı çok kolay:

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

İşte github repo: Ajax-Typeahead

Jquery-ui.min.js üzerinde bazı değişiklikler yaptım:

//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")`

ve aşağıdaki css'i ekleyin

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

Mükemmel çalışıyor.

Bu yöntemi kullanıyorum

$('.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');
    }
});

Bootstrap kullanarak arama yapabilirsiniz. Geçerli sürümde herhangi bir kaynak güncelleme sorunu yok Bootstrap'ın daktilo veri veri kaynağını post yanıtı ile güncellemekle ilgili sorun , yani güncellendikten sonra bootstrap kaynağı tekrar değiştirilebilir.

Bir örnek için lütfen aşağıya bakın:

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,
});

Kabul edilen cevabın kahve versiyonunu arayanlara:

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

Bu yazıyı inceledim ve her şey doğru çalışmak istemedi ve sonunda birkaç cevaptan bitleri birleştirdi, böylece% 100 çalışan bir demo var ve referans için buraya yapıştırın - bunu bir php dosyasına yapıştırın ve içerdiğinden emin olun Doğru yer.

<?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>

Hizmetiniz doğru uygulama / json içerik türü başlığını döndürmüyorsa bunu deneyin:

$('.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);
        });
    }
});

GÜNCELLEME: Kodumu bu çatalla değiştirdim

Ayrıca $ .each kullanmak yerine Tomislav Markovski'nin önerdiği gibi $ .map olarak değiştirdim

$('#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) {

    }
});

Ancak bazı problemlerle karşılaşıyorum

Yakalanmamış TypeError: undefined öğesinin 'toLowerCase' yöntemi çağrılamıyor

daha yeni bir yayında görebileceğiniz gibi burada anlamaya çalışıyorum

Umarım bu güncelleme size yardımcı olur ...

Senin için çalışan bir örneğim yok, ne de çok temiz bir çözümüm yok, ama sana ne bulduğumu söyleyeyim.

TypeAhead için javascript koduna bakarsanız şöyle görünür:

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

Bu kod, kaynak dizideki bir öğeyi eşleştirmek için jQuery "grep" yöntemini kullanır. Bir AJAX çağrısında kanca herhangi bir yer görmedim, bu yüzden bu "temiz" bir çözüm yoktur.

Ancak, bunu yapabilmeniz için biraz hileli bir yol, grep yönteminin jQuery'de çalışma şeklinden yararlanmaktır. Grep için ilk argüman kaynak dizisidir ve ikinci argüman kaynak dizisiyle eşleşmek için kullanılan bir işlevdir (Bootstrap başlattığınızda sağladığınız "eşleştiriciyi çağırır" uyarısı). Yapabileceğiniz şey, kaynağı kukla bir tek öğeli diziye ayarlamak ve eşleştiriciyi içinde AJAX çağrısı olan bir işlev olarak tanımlamaktır. Bu şekilde, AJAX çağrısını yalnızca bir kez çalıştıracaktır (kaynak dizininizde yalnızca bir öğe olduğu için).

Bu çözüm sadece çirkin olmakla kalmaz, aynı zamanda TypeAhead kodu her tuşa basmak için tasarlandığından performans sorunlarından muzdarip olacaktır (AJAX aramaları gerçekten sadece birkaç tuş vuruşunda veya belirli bir boşta kalma süresinden sonra gerçekleşmelidir). Benim tavsiyem denemek, ama farklı bir otomatik tamamlama kitaplığı ile sopa veya herhangi bir sorunla karşılaşırsanız sadece AJAX olmayan durumlar için kullanın.

ajax kullanırken , sonuçların doğru görüntülenmesi konusunda sorun yaşıyorsanız $.getJSON()bunun yerine deneyin $.get().

Benim durumumda $.get(), json_encode()sunucu tarafı kullansam da, kullandığımda her sonucun sadece ilk karakterini aldım .

$().one() Bunu çözmek için kullanıyorum ; Sayfa yüklendiğinde sunucuya ajax gönderiyorum ve işlemin tamamlanmasını bekliyorum. Ardından sonucu işleve iletin. $().one()Önemli .çünkü güçtür typehead.js girişine bir kez takmak için. Kötü yazı için özür dilerim.

(($) => {
    
    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();

?>