web-dev-qa-db-fra.com

Autocomplete sans interface utilisateur jQuery

J'utilise jQuery dans mon projet et je dois implémenter la saisie semi-automatique, mais j'aimerais éviter d'inclure le widget jQuery UI et, si tout va bien, utiliser un plug-in externe spécifique. Je dois interroger une source JSON distante qui renvoie des couples clé-valeur.

javascriptjqueryajaxautocompletejquery-autocomplete
19
Jumpa

Vous pouvez utiliser le plug-in Ajax Autocomplete for jQuery

Et voici la documentation complète

Code

SCRIPT

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<script>
   a1 = $('#query').autocomplete({
         width: 448,
         delimiter: /(,|;)\s*/,
         lookup: 'Andorra,Azerbaijan,Bahamas,Bahrain,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Fiji,France,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,India,Iraq,Ireland {Republic},Ivory Coast,Jamaica,Japan,Kazakhstan,Kiribati,Korea North,'.split(',')
      }); 
    </script>

CSS

.text-field {
    -moz-box-sizing: border-box;
    border: 1px solid #EEEEEE;
    font-family: "Source Sans Pro",Arial,sans-serif;
    font-size: 0.73684em;
    font-weight: 600;
    height: 37px;
    margin: 0;
    padding: 5px;
    width: 100%;
}
.autocomplete-suggestion {
    overflow: hidden;
    padding: 2px 5px;
    white-space: nowrap;
}
.autocomplete-suggestions strong {
    color: #3399FF;
    font-weight: normal;
}
.autocomplete-selected{
  background:#F0F0F0;
}

HTML

 <input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">

J'ai créé une démo de autocomplete voici le lien jsbin.com

11
Rohan Kumar

Vous pouvez utiliser l'attribut HTML5 'list' dans votre zone de saisie et lui fournir une liste personnalisée de valeurs à l'aide de datalist.

<!DOCTYPE html>
<html>
<head>
<!--your stuff-->
</head>
<body>
<!--your stuff-->
<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>
</body>
</html>

Si vous ne l'avez pas eu, lisez la suite à http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html

Il y a aussi une vidéo à ce sujetAuto-compléter sans JQuery

13
Cheezy Code

Voici un petit plugin autocomplete écrit par moi, s'il vous plaît essayez: https://github.com/Fischer-L/autoComplt

Parce que je n'utilise pas jQuery et que je ne veux pas inclure de grandes bibliothèques uniquement pour une fonctionnalité, j'écris pour moi-même.

Ce plugin ne dépend pas d'autres bibliothèques et n'a pas besoin d'inclure d'autres CSS, il suffit donc d'inclure un script JS.

P.S Si vous l'utilisez et que vous trouvez quelque chose qui doit être amélioré, merci de me le dire :) 

7
Fischer

J'ai commencé à écrire un plugin auto complete/mentioning en Javascript simple. Je ne suis pas encore terminé, mais cela pourrait être un bon point de départ. 

github

2
Reyraa
<script src="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.css"/>

Voici l'entrée:

<input type="search" id="place-search-input" placeholder="Start Searching..."/>

Javascript: 

<script type="text/javascript">

var ps;
window.onload = function () {
    ps = placeSearch({
        key: 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24',
        container: document.querySelector('#place-search-input'),
        useDeviceLocation: false,
        collection: [
            'poi',
            'airport',
            'address',
            'adminArea',
        ]
    });
}

0
Ha Viet

C'est le meilleur plugin Autocomplete multi catégorie/fonctionnalité que j'ai jamais vu, il contient de nombreuses fonctionnalités et vous donne le contrôle total sur 40 paramètres pour le personnaliser à votre guise. Il est tellement dynamique et fournit des entrées multilingues avec détection automatique des langues RTL ou LTR.

Il n'utilise pas le JQuery et le code a une taille très légère et si propre.

La page de démonstration:http://www.muwakaba.com/plugins/autocomplete

Vous pouvez l'utiliser avec différentes configurations sur la page de démonstration et voir tous les paramètres et les fonctionnalités. 

Bonne chance!

0
moderns

Pas besoin d'inclure JQuery ou toute autre bibliothèque tierce.

La fonction IP_autoComplete va automatiquement concaténer la valeur du champ avec l'URL (1er paramètre). Par exemple, textbox a pour valeur neeraj, alors arrjson.php?Name=neeraj sera déclenché.

Vous pouvez également utiliser la fonction IP_autocomplete pour les valeurs statiques. Ajoutez simplement le signe # une fois au début dans votre chaîne (séparés par des virgules). E.g: "# val1, val2, val3"

arrjson.php devrait renvoyer une chaîne encodée en json.

HTML:

<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js">

Corps 

<input type="text" name="testautocomplete" id="testautocomplete" onkeypress="IP_autoComplete('arrjson.php?Name=',this.id,event)">

JSFiddle

Ou simplement vous pouvez donner statique:

<input type="text" name="testneeraj" id="testneeraj" onkeyup="IP_autoComplete('#sachin bhalake,ishwar agam,mohsin khan,neeraj dhekale,sheetal dhekale,ajay bhalake',this.id,event)">
0
Neeraj Dhekale