twitter bootstrap typeahead ajax example

Próbuję znaleźć działający przykład twitterowego elementu typu bootstrap , który wykona wywołanie ajax w celu zapełnienia menu rozwijanego.

Mam istniejący działający przykład autouzupełniania jquery, który definiuje adres URL ajax do i sposób przetwarzania odpowiedzi

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

Co muszę zmienić, aby przekonwertować to na przykład?

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

Zaczekam na rozwiązanie problemu „ Dodaj obsługę źródeł zdalnych dla typeahead ”.

Edycja: typeahead nie jest już dołączany do Bootstrap 3. Sprawdź:

• Gdzie jest moduł typeahead JavaScript w Bootstrap 3 RC 1?
• typeahead.js

Począwszy od wersji Bootstrap 2.1.0 do 2.3.2, możesz to zrobić:

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

Aby wykorzystać dane JSON w następujący sposób:

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

Zauważ, że dane JSON muszą być odpowiedniego typu MIME (application / json), więc jQuery rozpoznaje je jako JSON.

Możesz użyć widelca BS Typeahead, który obsługuje wywołania ajax. Następnie będziesz mógł napisać:

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

Począwszy od 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);
            }
        });
    }
});

Teraz możesz utworzyć zunifikowany kod, umieszczając linki „żądanie json” w kodzie HTML.

Wszystkie odpowiedzi odnoszą się do typu BootStrap 2, który nie jest już obecny w BootStrap 3.

Dla każdego, kogo tu skierowano, szukającego przykładu AJAX za pomocą nowego postahead.js po uruchomieniu Bootstrap , oto działający przykład. Składnia jest nieco inna:

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

W tym przykładzie użyto zarówno sugestii synchronicznej (wywołanie processSync ), jak i asynchronicznej, więc niektóre opcje pojawią się natychmiast, a inne zostaną dodane. Możesz po prostu użyć jednego lub drugiego.

Istnieje wiele możliwych do powiązania zdarzeń i kilka bardzo potężnych opcji, w tym praca z obiektami zamiast ciągami, w którym to przypadku użyłbyś własnej funkcji wyświetlania do renderowania swoich elementów jako tekstu.

Rozszerzyłem oryginalną wtyczkę TypeAhead Bootstrap o funkcje ajax. Bardzo łatwy w użyciu:

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

Oto repozytorium github: Ajax-Typeahead

Wprowadziłem kilka zmian w pliku 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")`

i dodaj następujące css

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

Działa idealnie.

Używam tej metody

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

Można nawiązywać połączenia za pomocą Bootstrap. W bieżącej wersji nie występują problemy z aktualizacją źródła. Problemy z aktualizacją typowego źródła danych Bootstrap z odpowiedzią post , tzn. Źródło aktualizacji po aktualizacji można ponownie zmodyfikować.

Przykład znajduje się poniżej:

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

Do osób poszukujących coffeescriptowej wersji zaakceptowanej odpowiedzi:

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

Przejrzałem ten post i wszystko nie chciałem działać poprawnie i ostatecznie poskładałem bity razem z kilku odpowiedzi, więc mam w 100% działające demo i wkleję go tutaj w celach informacyjnych - wklej to do pliku php i upewnij się, że dołączone są w dobre miejsce.

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

Wypróbuj to, jeśli twoja usługa nie zwraca odpowiedniego nagłówka typu treści aplikacji / json:

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

AKTUALIZACJA: Zmodyfikowałem swój kod za pomocą tego widelca

także zamiast używania $ .each zmieniłem na $ .map, jak zasugerował 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) {

    }
});

Dostaję jednak pewne problemy

Uncaught TypeError: Nie można wywołać metody „toLowerCase” niezdefiniowanej

jak widać w nowym poście, staram się tutaj znaleźć

mam nadzieję, że ta aktualizacja pomoże ci ...

Nie mam dla ciebie działającego przykładu ani nie mam bardzo czystego rozwiązania, ale powiem ci, co znalazłem.

Jeśli spojrzysz na kod JavaScript dla TypeAhead, wygląda to tak:

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

Ten kod używa metody „grep” jQuery w celu dopasowania elementu w tablicy źródłowej. Nie widziałem żadnych miejsc, w których można by nawiązać połączenie AJAX, więc nie ma „czystego” rozwiązania tego problemu.

Jednak jednym z dość pospiesznych sposobów na zrobienie tego jest skorzystanie ze sposobu, w jaki metoda grep działa w jQuery. Pierwszym argumentem grep jest tablica źródłowa, a drugim argumentem jest funkcja używana do dopasowania tablicy źródłowej (zauważ, że Bootstrap wywołuje „dopasowujący”, który podałeś podczas inicjowania). To, co możesz zrobić, to ustawić źródło na sztuczną tablicę jednoelementową i zdefiniować moduł dopasowywania jako funkcję z wywołaniem AJAX. W ten sposób wywoła wywołanie AJAX tylko raz (ponieważ tablica źródłowa zawiera tylko jeden element).

To rozwiązanie jest nie tylko hackerskie, ale będzie miało problemy z wydajnością, ponieważ kod TypeAhead jest zaprojektowany do wyszukiwania za każdym naciśnięciem klawisza (wywołania AJAX powinny naprawdę występować tylko po kilku naciśnięciach klawiszy lub po pewnym czasie bezczynności). Radzę spróbować, ale trzymaj się innej biblioteki autouzupełniania lub używaj jej tylko w sytuacjach innych niż AJAX, jeśli napotkasz jakiekolwiek problemy.

gdy używasz ajax, spróbuj $.getJSON()zamiast$.get() jeśli masz problemy z poprawnym wyświetlaniem wyników.

W moim przypadku dostałem tylko pierwszy znak każdego wyniku, gdy go użyłem $.get(), chociaż użyłem strony json_encode()serwera.

używam $().one() do rozwiązania tego; Po załadowaniu strony wysyłam ajax do serwera i czekam na zakończenie. Następnie przekaż wynik do funkcji. $().one()jest ważne. Ponieważ wymusza jednokrotne dołączenie pliku typehead.js do danych wejściowych. przepraszam za złe pisanie.

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

?>