AutoVervollständigen Ohne jQuery UI

Bin ich mit Hilfe von jQuery in mein Projekt und ich brauche zur Umsetzung AutoVervollständigen, aber ich möchte vermeiden, einschließlich der jQuery UI-widget, und hoffentlich verwenden einige bestimmte externe plugin.
Könnten Sie bitte einige Beispiele nennen/verlinken?
Ich habe die Abfrage eines remote JSON-Quelle, die Rückgabe der Schlüssel-Wert-Paare.

InformationsquelleAutor der Frage Jumpa | 2013-10-03

Können Sie die Ajax Autocomplete jQuery plugin

Und hier ist die 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">

Erstellte ich eine demo von autocomplete hier ist der link jsbin.com

InformationsquelleAutor der Antwort Rohan Kumar

Können Sie HTML5 - "Listen" - Attribut in das input-Textfeld und geben Sie eine benutzerdefinierte Liste von Werten mit 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>

Wenn Sie nicht bekommen, Lesen Sie mehr unter http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html

Es gibt eine video-als auch für es Auto-Komplett Ohne JQuery

InformationsquelleAutor der Antwort Cheezy Code

7

Hier ist ein wenig autocomplete-plugin von mir geschrieben, bitte versuchen Sie: https://github.com/Fischer-L/autoComplt

Weil ich mich noch nicht mit jQuery und nicht wollen, um einige große libs nur für eine Funktion, ich Schreibe für mich selbst.

Dieses plugin hängt nicht von anderen Bibliotheken und nicht um andere CSS, also einfach darunter ein JS-script ist genug.

P. S Wenn Sie es verwenden, und Sie werden einiges finden, was verbessert werden muss, bitte mir sagen 🙂

InformationsquelleAutor der Antwort Fischer
2

Habe ich angefangen zu schreiben, eine auto-vervollständigen /zu erwähnen plugin in einfachem Javascript. Ich nicht, noch nicht abgeschlossen, aber es könnte sein, einen guten start Punkt.

github

InformationsquelleAutor der Antwort Reyraa
0

Keine Notwendigkeit von JQuery oder eine andere Dritte Partei-Bibliothek.

IP_autoComplete Funktion wird automatisch concatinate Feld mit dem Wert URL (1. parameter). Zum Beispiel ein Textfeld Wert neeraj dann arrjson.php?Name=neeraj ausgelöst werden.

Können Sie IP_autocomplete Funktion für statische Wert. Fügen Sie einfach # melden Sie sich einmal ab in den string (durch Komma sepreated). E. g: "#val1,val2,val3"

arrjson.php sollte die Rückkehr json-kodierten string.

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 man kann einfach die statischen:
```
<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)">
```
InformationsquelleAutor der Antwort Neeraj Dhekale
0

Dies ist die beste multi category/Funktion AutoVervollständigen plugin, das ich je gesehen habe, es enthält viele Funktionen und gibt Ihnen die volle Kontrolle über 40 Parameter anpassen, wie Sie es wünschen. Es ist so dynamisch und bietet multi-Sprachen-Eingänge mit auto-Erkennung von RTL oder LTR-Sprachen.

Sie nicht verwenden die JQuery und der code ist sehr leicht Größe und so sauber.

Der demo-Seite: http://www.muwakaba.com/plugins/autocomplete

Können Sie es mit verschiedenen Konfigurationen auf der demo-Seite und schauen Sie sich alle Parameter und Funktionen.

Glück!

InformationsquelleAutor der Antwort moderns

-10

Versuchen, diese, dies wird Ihnen helfen,

HTML

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

$(function() {
    var availableTags = [
      "ActionScript", "AppleScript","Asp","BASIC","C","C++","Clojure",
      "COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java",
      "JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

Fiddle here

InformationsquelleAutor der Antwort S. S. Rawat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.