twitter bootstrap typeahead ajax exemple

J'essaie de trouver un exemple de travail de l' élément twitter bootstrap typeahead qui fera un appel ajax pour remplir sa liste déroulante.

J'ai un exemple de saisie semi-automatique de travail existant qui définit l'URL ajax et comment traiter la réponse

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

Que dois-je changer pour convertir cela en l'exemple de 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];
                }
            );
       ..

Je vais attendre que le problème « Ajouter le support des sources distantes pour typeahead » soit résolu.

Edit: typeahead n'est plus inclus dans Bootstrap 3. Découvrez:

• Où se trouve le module JavaScript typeahead dans Bootstrap 3 RC 1?
• typeahead.js

De Bootstrap 2.1.0 à 2.3.2, vous pouvez le faire:

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

Pour consommer des données JSON comme ceci:

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

Notez que les données JSON doivent être du bon type MIME (application / json) afin que jQuery les reconnaisse comme JSON.

Vous pouvez utiliser le fork BS Typeahead qui prend en charge les appels ajax. Vous pourrez alors écrire:

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

À partir de 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);
            }
        });
    }
});

Vous pouvez maintenant créer un code unifié, en plaçant des liens "json-request" dans votre code HTML.

Toutes les réponses se réfèrent à la tête de frappe BootStrap 2, qui n'est plus présente dans BootStrap 3.

Pour toute autre personne dirigée ici à la recherche d'un exemple AJAX en utilisant le nouveau typeahead.js Twitter post-Bootstrap , voici un exemple de travail. La syntaxe est un peu différente:

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

Cet exemple utilise à la fois la suggestion synchrone (l'appel à processSync ) et asynchrone, vous verrez donc certaines options apparaître immédiatement, puis d'autres seront ajoutées. Vous pouvez simplement utiliser l'un ou l'autre.

Il existe de nombreux événements pouvant être liés et certaines options très puissantes, notamment le travail avec des objets plutôt qu'avec des chaînes, auquel cas vous utiliseriez votre propre fonction d' affichage personnalisée pour rendre vos éléments sous forme de texte.

J'ai augmenté le plugin Bootstrap typeahead original avec des capacités ajax. Très simple d'utilisation:

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

Voici le dépôt github: Ajax-Typeahead

J'ai fait quelques modifications sur 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")`

et ajouter css suivant

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

Fonctionne parfaitement.

J'utilise cette méthode

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

On peut faire des appels en utilisant Bootstrap. La version actuelle ne présente aucun problème de mise à jour source. Problème de mise à jour de la source de données de type Bootstrap avec post-réponse , c'est-à-dire que la source de bootstrap une fois mise à jour peut être à nouveau modifiée.

Veuillez vous référer ci-dessous pour un exemple:

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

À ceux qui recherchent une version en coffeescript de la réponse acceptée:

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

J'ai parcouru ce post et tout ne voulait pas fonctionner correctement et j'ai finalement reconstitué les bits de quelques réponses, j'ai donc une démo de travail à 100% et je vais la coller ici pour référence - collez-la dans un fichier php et assurez-vous que les inclus sont dans le bon endroit.

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

Essayez ceci si votre service ne renvoie pas le bon en-tête de type de contenu application / 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);
        });
    }
});

MISE À JOUR: j'ai modifié mon code en utilisant cette fourchette

également au lieu d'utiliser $ .each, je suis passé à $ .map comme suggéré par 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) {

    }
});

Cependant, je rencontre des problèmes en obtenant

TypeError non capturé: impossible d'appeler la méthode «toLowerCase» de non défini

comme vous pouvez le voir sur un nouveau post, j'essaie de comprendre ici

j'espère que cette mise à jour vous sera utile ...

Je n'ai pas d'exemple de travail pour vous ni de solution très propre, mais laissez-moi vous dire ce que j'ai trouvé.

Si vous regardez le code javascript de TypeAhead, il ressemble à ceci:

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

Ce code utilise la méthode jQuery "grep" pour faire correspondre un élément du tableau source. Je n'ai pas vu d'endroits où vous pourriez accrocher un appel AJAX, donc il n'y a pas de solution "propre" à cela.

Cependant, une façon quelque peu hacky que vous pouvez faire est de tirer parti de la façon dont la méthode grep fonctionne dans jQuery. Le premier argument de grep est le tableau source et le second argument est une fonction qui est utilisée pour faire correspondre le tableau source (notez que Bootstrap appelle le "matcher" que vous avez fourni lorsque vous l'avez initialisé). Ce que vous pourriez faire est de définir la source sur un tableau factice à un élément et de définir le matcher comme une fonction contenant un appel AJAX. De cette façon, il exécutera l'appel AJAX une seule fois (puisque votre tableau source ne contient qu'un seul élément).

Cette solution est non seulement hacky, mais elle souffrira de problèmes de performances car le code TypeAhead est conçu pour effectuer une recherche à chaque pression de touche (les appels AJAX ne devraient vraiment se produire que sur quelques touches ou après un certain temps d'inactivité). Mon conseil est de l'essayer, mais restez avec une autre bibliothèque de saisie semi-automatique ou utilisez-la uniquement pour les situations non AJAX si vous rencontrez des problèmes.

lorsque vous utilisez ajax, essayez $.getJSON()plutôt que $.get()si vous avez des problèmes avec l'affichage correct des résultats.

Dans mon cas, je n'ai obtenu que le premier caractère de chaque résultat lorsque j'ai utilisé $.get(), bien que j'aie utilisé json_encode()côté serveur.

j'utilise $().one() pour résoudre cela; Lorsque la page est chargée, j'envoie ajax au serveur et j'attends de terminer. Passez ensuite le résultat à la fonction. $().one()est important. Car forcez typehead.js à être attaché une fois. désolé pour une mauvaise écriture.

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

?>