twitter bootstrap typeahead ajax exemple

j'essaye de trouver un exemple de travail de l'élément bootstrap typographehead qui fera un appel ajax pour remplir son dropdown.

j'ai un exemple jQuery autocomplete 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];
                }
            );
       ..

Qu'est-ce que je dois changer pour convertir ceci à l'exemple 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 le" ajouter la prise en charge des sources distantes pour typeahead ' problème à résoudre.

267
demandé sur user 2012-02-10 22:20:49

16 réponses

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

à partir de Bootstrap 2.1.0 jusqu'à 2.3.2, Vous pouvez faire ceci:

$('.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"
    ]
}

noter que le JSON les données doivent être du bon type mime (application/json) donc jQuery les reconnaît comme JSON.

290
répondu Stijn Van Bael 2017-05-23 12:18:15

vous pouvez utiliser le BS Typeahead fork qui supporte les appels ajax. Vous pourrez alors écrire:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});
116
répondu bogert 2012-11-07 14:56:23

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

Maintenant vous pouvez faire un code unifié, en plaçant des liens "JSON-request" dans votre code HTML.

69
répondu Thantifaxath 2012-10-31 11:32:20

toutes les réponses se rapportent à BootStrap 2 typeahead, qui n'est plus présent dans BootStrap 3.

pour toute autre personne dirigée ici à la recherche d'un exemple AJAX en utilisant le nouveau post-Bootstrap Twitter typeahead.js , voici un exemple pratique. 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 synchrone (l'appel à processSync ) et asynchrone suggestion, donc vous avez voir certaines options apparaître immédiatement, puis d'autres sont ajoutés. Vous pouvez simplement utiliser l'un ou l'autre.

il y a beaucoup d'événements bindables et quelques options très puissantes, y compris le travail avec des objets plutôt que des chaînes, dans ce cas, vous utilisez votre propre fonction display pour rendre vos articles sous forme de texte.

42
répondu Jonathan Lidbeck 2015-05-20 04:49:15

j'ai augmenté le plugin original de Bootstrap de typeahead avec des capacités ajax. Très facile à utiliser:

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

voici le GitHub repo: Ajax-Typeahead

24
répondu Paul Warelis 2012-10-31 14:46:26

j'ai fait quelques modifications sur le 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 après css

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

fonctionne parfaitement.

5
répondu bmoers 2012-02-13 06:46:02

on peut faire des appels en utilisant Bootstrap. La version actuelle ne présente aucun problème de mise à jour des sources de la Difficulté de la mise à jour de Bootstrap est typeahead de source de données avec la réponse post , i.e. la source de bootstrap une fois mise à jour peut être à nouveau modifiée.

voir 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,
});
2
répondu neoeahit 2017-05-23 10:31:30

à ceux qui cherchent une version coffee-script de la réponse acceptée:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options
2
répondu Hendrik 2013-06-24 23:24:13

j'ai parcouru ce post et tout ne voulait pas fonctionner correctement et finalement assemblé les bits à partir de quelques réponses donc j'ai une démo de travail à 100% et je vais la coller ici pour référence - coller ceci dans un fichier php et s'assurer que les inclusions sont au 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>
2
répondu l0ft13 2013-07-04 21:56:10

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');
    }
});
2
répondu Krava 2014-12-22 19:14:19

mise à jour: j'ai modifié mon code en utilisant this fork

aussi au lieu d'utiliser $.chaque j'ai changé de $.carte suggérée 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 quelques problèmes par arriver

Uncaught TypeError: Ne peut pas appeler une méthode toLowerCase' undefined

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

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

1
répondu mmoscosa 2017-05-23 10:31:30

essayez ceci si votre service ne renvoie pas le bon type d'en-tête 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);
        });
    }
});
1
répondu Andres 2015-09-16 22:43:03

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

si vous regardez le code javascript pour dactylographe 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 dans le tableau source. Je n'ai vu aucun endroit où vous pourriez accrocher dans un appel AJAX, donc il n'y a pas de solution "propre" à cela.

cependant, un peu hacky façon que vous pouvez faire est de profiter de la façon dont le grep méthode fonctionne en jQuery. Le premier argument à grep est le tableau source et le second argument est une fonction qui est utilisée pour correspondre au tableau source (notez que Bootstrap appelle le "matcher" que vous avez fourni lorsque vous l'avez initialisé). Ce que vous pouvez faire est de définir la source à un dummy one-element array et de définir le matcher comme une fonction avec un appel AJAX dedans. De cette façon, il lancera L'appel AJAX juste une fois (puisque votre tableau source n'a qu'un seul élément).

cette solution n'est pas seulement hacky, mais elle souffrira de problèmes de performance puisque le code de tête de machine est conçu pour faire une recherche sur chaque touche de presse (les appels AJAX ne devraient vraiment se produire que sur quelques touches ou après une certaine période de temps inactif). Mon conseil est de l'essayer, mais s'en tenir à une bibliothèque autocomplete différente ou ne l'utiliser pour des situations non-AJAX si vous rencontrez des problèmes.

0
répondu Aamer Abbas 2012-02-13 17:17:29

lorsque vous utilisez ajax, essayez $.getJSON() au lieu de $.get() si vous avez des problèmes avec l'affichage correct des résultats.

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

0
répondu larsbo 2013-05-16 07:42:38

j'utilise $().one() pour résoudre ce; Lorsque la page est chargée, j'envoie ajax au serveur et j'attends d'avoir fini. Puis passer résultat à la fonction. $().one() est important .Parce que la force frappe tête.js à joindre à l'entrée une seule fois. désolé pour la 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 ?">
0
répondu ali karimi 2018-05-05 14:03:49
 $('#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();

?>

-1
répondu Mohamed Ayed 2018-04-11 06:55:47