web-dev-qa-db-fra.com

Saisie semi-automatique JavaScript sans bibliothèque externe

Existe-t-il une bibliothèque de saisie semi-automatique javascript qui ne dépend d'aucune autre bibliothèque?

Je n'utilise pas jQuery ou autres, car je crée une application mobile dont j'ai besoin pour garder une lumière supplémentaire.

javascriptautocomplete
42
Billy Moon

Ici est un exemple JavaScript de base, qui pourrait être modifié en un contrôle de saisie semi-automatique:

HTML

<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>

Javascript

var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];

function matchPeople(input) {
  var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
  return people.filter(function(person) {
    if (person.match(reg)) {
      return person;
    }
  });
}

function changeInput(val) {
  var autoCompleteResult = matchPeople(val);
  document.getElementById("result").innerHTML = autoCompleteResult;
}
25
svnm

Pour ceux qui envisagent cela à partir de 2017 et qui ont besoin d'une solution simple, vous pouvez utiliser la balise <datalist> Intégrée de HTML5 au lieu de vous fier à JavaScript.

Exemple:

<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Java">
  <option value="Ruby">
  <option value="PHP">
  <option value="Go">
  <option value="Erlang">
  <option value="Python">
  <option value="C">
  <option value="C#">
  <option value="C++">
</datalist>

<input type="text" list="languages">

Notez que cela ne fonctionnera pas dans Safari (à partir d'avril 2017).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

18
Optimae

Le noyau d'un script de saisie semi-automatique sera l'appel ajax au dictionnaire des termes.

Je suppose que votre application mobile comprend déjà une fonction ajax, alors peut-être que vous feriez mieux d'écrire votre saisie semi-automatique à partir de zéro? Fondamentalement, tout ce dont vous avez besoin dans une balise d'entrée, un gestionnaire d'événements keyup qui déclenche l'appel ajax et un div pour collecter la réponse.

[Mise à jour] Sur la base des commentaires, quelques références du blog de John Resig:

http://ejohn.org/blog/revised-javascript-dictionary-search/

http://ejohn.org/blog/jquery-livesearch/

9
Christophe

Fonctionnalité ES2016: Array.prototype.includes sans bibliothèque externe.

function autoComplete(Arr, Input) {
    return Arr.filter(e =>e.toLowerCase().includes(Input.toLowerCase()));
}

Démo Codepen

2
ronaldtgi