Automatische Vervollständigung ohne jQuery-Benutzeroberfläche

Lesezeit: 5 Minuten

Ich verwende jQuery in meinem Projekt und muss die automatische Vervollständigung implementieren, aber ich möchte das jQuery-UI-Widget vermeiden und hoffentlich ein bestimmtes externes Plugin verwenden. Könntest du bitte ein paar Beispiele/Links geben? Ich muss eine Remote-JSON-Quelle abfragen, die Schlüssel-Wert-Paare zurückgibt.

Benutzeravatar von Cheezy Code
Cheezy-Code

Sie können das HTML5-Attribut „list“ in Ihrem Eingabetextfeld verwenden und ihm mithilfe von datalist eine benutzerdefinierte Liste von Werten bereitstellen.

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

Wenn Sie es nicht verstanden haben, lesen Sie mehr unter http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html

Dazu gibt es auch ein Video Automatische Vervollständigung ohne JQuery

Benutzeravatar von Rohan Kumar
Rohan Kumar

Du kannst den … benutzen Ajax-Autovervollständigung für das jQuery-Plugin

Und hier ist die vollständige Dokumentation

Code

SKRIPT

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

Ich habe eine Demo von erstellt autocomplete hier ist der Link jsbin.com

Hier ist ein kleines Autovervollständigungs-Plugin, das von mir geschrieben wurde, bitte versuchen Sie es: https://github.com/Fischer-L/autoComplt

Da ich jQuery nicht verwende und keine großen Bibliotheken nur für ein Feature einbinden möchte, schreibe ich für mich selbst.

Dieses Plugin ist nicht von anderen Bibliotheken abhängig und muss kein anderes CSS enthalten, daher reicht es aus, nur ein JS-Skript einzubinden.

PS Wenn Sie es verwenden und etwas finden, das verbessert werden muss, sagen Sie es mir bitte 🙂

  • Nehmen Sie nicht an, Sie wollten Ajax implementieren, Sie könnten mich einfach vor jquery retten 🙂

    – Alec Blaugrün

    18. August 2015 um 14:32 Uhr

  • @Fischer Ja! Bitte erweitern Sie die Liste um die Möglichkeit, die Liste aus einem AJAX-Aufruf zu beziehen. Was Sie getan haben, ist großartig, weil es nicht so aussieht, als würde es das DOM um die Eingabe herum ändern. Ich habe http://stackoverflow.com/users/1123047/fischern versucht, so etwas zu finden, um es in verschiedenen UI-Frameworks zu verwenden, ohne das Layout zu beschädigen. Ich muss auch eine serverseitige Suche auslösen, aber ein toller Start!

    – Josh Russo

    29. März 2017 um 12:39 Uhr


  • @AlecTeal Wenn Sie immer noch daran interessiert sind, unterstützt das Steuerelement tatsächlich AJAX gist.github.com/rupe120/bc520aaac48608b0c3d825d13dda6deb

    – Josh Russo

    29. März 2017 um 13:54 Uhr

Ich habe begonnen, ein Plugin für die automatische Vervollständigung / Erwähnung in einfachem Javascript zu schreiben. Ich bin noch nicht fertig, aber es könnte ein guter Ausgangspunkt sein.

github

Benutzeravatar von Neeraj Dhekale
Neeraj Dhekale

Es ist nicht erforderlich, JQuery oder andere Bibliotheken von Drittanbietern einzuschließen.

IP_autoComplete Die Funktion verknüpft automatisch den Feldwert mit der URL (1. Parameter). Zum Beispiel hat Textbox einen Wert neeraj dann arrjson.php?Name=neeraj wird ausgelöst.

Sie können die IP_autocomplete-Funktion auch für statische Werte verwenden. Fügen Sie einfach zu Beginn Ihrer Zeichenfolge ein #-Zeichen hinzu (durch Kommas getrennt). Bsp.: “#val1,val2,val3”

arrjson.php sollte eine json-codierte Zeichenfolge zurückgeben.

HTML:

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

Körper

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

JSFiddle

Oder Sie können einfach static geben:

<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)">

Benutzeravatar von moderns
Modernen

Dies ist das beste Autocomplete-Plugin für mehrere Kategorien/Features, das ich je gesehen habe. Es enthält viele Funktionen und gibt Ihnen die volle Kontrolle über 40 Parameter, um es nach Ihren Wünschen anzupassen. Es ist so dynamisch und bietet mehrsprachige Eingaben mit automatischer Erkennung für RTL- oder LTR-Sprachen.

Es verwendet kein JQuery und der Code hat eine sehr geringe Größe und ist so sauber.

Die Demoseite: http://www.muwakaba.com/plugins/autocomplete

Sie können es mit verschiedenen Konfigurationen auf der Demoseite verwenden und alle Parameter und Funktionen sehen.

Viel Glück!

<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"/>

Hier ist Eingabe:

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

1431410cookie-checkAutomatische Vervollständigung ohne jQuery-Benutzeroberfläche

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy