Je crée un site Django, sur un certain modèle j'ai ajouté un formulaire Ajax et je voudrais ajouter une fonction de saisie semi-automatique, afin de faciliter la navigation.
Mon problème principal est que les données que je devrais rechercher est un tableau d'objets JSON, alors que la plupart des solutions que j'ai trouvées fonctionnent avec des tableaux normaux.
Voici ce que j'ai maintenant:
"results": [
{
"item": "First",
"id": "1847",
},
{
"item": "Second",
"id": "4442",
},
{
"item": "Third",
"id": "3847",
}]
C'est à quoi ressemblent les données, c'est environ 700 enregistrements; voici les trois premiers:
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
//Autocomplete
});
});
</script>
<input type="text" id='firstfield' name='input_val'>
J'ai besoin que cela soit aussi rapide que possible. Existe-t-il une solution native JQuery / Ajax pour cela? Ou y a-t-il une bibliothèque spécifique pour ce faire? Tout conseil ou solution est apprécié, merci d'avance!
3 Réponses :
Vous pouvez utiliser la fonction Jquery autocomplete ()
Voici le lien https://jqueryui.com/autocomplete/
$( "#tags" ).autocomplete({
source: availableTags
});
} );
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure"}
Essayez celui-ci:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
$( "#tags" ).autocomplete({
source: data
});
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Vous pouvez utiliser le plugin jQuery Typeahead Search . Configurez simplement votre formulaire pour utiliser l'imbrication appropriée des classes comme indiqué ci-dessous.
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<h1>jQuery Typeahead</h1>
<form>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="first-field" name="first-field" placeholder="Search" autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit"><i class="typeahead__search-icon"></i></button>
</div>
</div>
</div>
</form>
$(() => {
//$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
let data = {
"results": [
{ "item": "First", "id": "1847" },
{ "item": "Second", "id": "4442" },
{ "item": "Third", "id": "3847" }
]
};
$('#first-field').typeahead({
source: {
data: data.results.map(record => record.item)
},
callback: {
onInit: function($el) {
console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
}
}
});
//})
});
Merci, en effet Typehead semble une solution valable, mais quelle est la principale différence par rapport à Jquery Autocomplete? Est-ce que l'un est meilleur que l'autre?
@ Jack022 C'est un plugin jQuery (clair et simple) et ne nécessite pas la surcharge supplémentaire de l'interface utilisateur jQuery. En outre, il est moins restrictif en termes de contrôle de style.
Merci! Je regarde le code et je pense que j'irai avec Typehead. La seule chose qui m'inquiète un peu, c'est que le dernier commit du code date d'il y a 2 ans; Je me demande si cela pourrait créer un problème avec la future version de Jquery ou toute autre bibliothèque JS
@ Jack022 Le dernier commit remonte à moins de quatre mois: github.com/running-coder/jquery-typeahead/blob/master/src/...
Oh je suis désolé! Merci beaucoup!
Je me suis trompé avec celui-ci: github.com/twitter/typeahead.js
Comme ça? jqueryui.com/autocomplete Changer le tableau est simple:
data.results.map (obj => obj.item)aboutira à un tableau des éléments.Ouais, la saisie semi-automatique est une solution valide, je ne comprends tout simplement pas quoi utiliser entre la saisie automatique et la saisie semi-automatique