1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Autocomplete Beschränkung auf Liste

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von tsunami, 12. Juli 2017.

  1. tsunami

    tsunami Grünschnabel

    Hallo,
    ich habe mir ein Autocomplete aus Codeschnipseln zusammengebastelt. Funktioniert bis auf einen kleinen Schönheitsfehler.
    Wenn ich Text eingebe, der nicht in der Liste ist, wird das Feld geleert. Aber leider erst, wenn ich die Tab-Taste drücke. Wenn ich direkt auf den Submit Button klicke, wird dummerweise der fehlerhafte Datensatz abgeschickt.
    Wie bekomme ich es hin, dass eine Eingabe von Text, der nicht in der Luste ist, erst gar nicht möglich ist oder alternativ der Submit Button einfach ausgeblendet wird. =>
    Code (Text):
    1. document.getElementById('rowxxx').style.display = 'none' ;
    Klappt, wird aber auch nur nach "tab" wieder eingeblendet. Schön wäre, wenn es bei tab und klick auf den korrekten Datensatz geht.
    Beispiel:
    Die Liste:
    id:"1"
    value:"Apfel",
    id:"2"
    value:"Birne",
    id:"3"
    value:"Banane"

    Gebe ich nun zB Bananne ein schickt er zwar den korrekten id-Wert ab und es ist nur ein Schönheitsfehler.
    Gebe ich nun zB xxxxx funktioniert es, sofern keine vorherigen Eigaben gemacht wurden, ansonsten nimmt er die id, von der vorherigen EIngabe. Gebe ich Banane123 ein geht es auch, id korrekt.
    Code (Text):
    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1">
    6.   <title>jQuery UI Autocomplete - Custom data and display</title>
    7.   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    8.   <link rel="stylesheet" href="/resources/demos/style.css">
    9.   <style>
    10.   #project-label {
    11.     display: block;
    12.     font-weight: bold;
    13.     margin-bottom: 1em;
    14.   }
    15.   #project-icon {
    16.     float: left;
    17.     height: 32px;
    18.     width: 32px;
    19.   }
    20.   #project-description {
    21.     margin: 0;
    22.     padding: 0;
    23.   }
    24.   </style>
    25.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    26.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    27.   <script>
    28.   $( function() {
    29.     var projects = [
    30. {value: "1",label:"Apfel"},{value: "2",label:"Birne"},{value: "3",label:"Banane"},{value: "4",label:"Pflaume"}    ];
    31.  
    32.     $( "#project" ).autocomplete({
    33.             minLength: 0,
    34.             source: projects,
    35.             focus: function( event, ui ) {
    36.                 $( "#project" ).val( ui.item.label );
    37.                 return false;
    38.             },
    39.           select: function( event, ui ) {
    40.                 $( "#project" ).val( ui.item.label );
    41.                 $( "#project-id" ).val( ui.item.value );
    42.                 return false;
    43.             },
    44.       selectFirst: true,
    45. click: function (event, ui) {
    46.         if (ui.item == null){
    47.          //here is null if entered value is not match in suggestion list
    48.             $(this).val((ui.item ? ui.item.id : ""));
    49. //                 $( "#project-id" ).val( ui.item.value )="";
    50. //               $( "#project" ).val( ui.item.value )="";
    51. document.getElementById('rowxxx').disabled = true;
    52.         }
    53.         else
    54.         document.getElementById('rowxxx').disabled = false;
    55.     }
    56.         })
    57.         .autocomplete( "instance" )._renderItem = function( ul, item ) {
    58.             return $( "<li>" )
    59.                 .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
    60.                 .appendTo( ul );
    61.         };
    62.     } );
    63.   </script>
    64.  
    65.  
    66. </head>
    67. <body>
    68.  
    69. <div id="project-label">Select a project (type "j" for a start):</div>
    70. <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
    71. <form method="post" action="ajax2.php">
    72. <input id="project" name="nummer" placeholder="fucking Javascript">
    73. <input type="hidden" id="project-id" name="id">
    74. <input type="submit" id="rowxxx">   </form>
    75.  
    76.  
    77. </body>
    78. </html>
    Irgenwelche Ansätze? Vielen Dank
    tsunami
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Einen Ansatz dafür habe ich schon, aber er ist nicht besonders performant, weil bei jeder Änderung im Eingabefeld die komplette Liste abgesucht werden muss. Wenn diese nicht übermäßig lang wird, ist dies sicher vertretbar.
    Code (Javascript):
    1.         $(function () {
    2.             var projects = [
    3.         { value: "1", label: "Apfel" }, { value: "2", label: "Birne" }, { value: "3", label: "Banane" }, { value: "4", label: "Pflaume" }];
    4.  
    5.             $("#project").autocomplete({
    6.                 minLength: 0,
    7.                 source: projects,
    8.                 focus: function (event, ui) {
    9.                     $("#project").val(ui.item.label);
    10.                     return false;
    11.                 },
    12.                 select: function (event, ui) {
    13.                     $("#project").val(ui.item.label);
    14.                     $("#project-id").val(ui.item.value);
    15.                     $("#rowxxx").prop("disabled", false);
    16.                     return false;
    17.                 },
    18.                 selectFirst: true,
    19.                 click: function (event, ui) {
    20.                     if (ui.item == null) {
    21.                         //here is null if entered value is not match in suggestion list
    22.                         $(this).val((ui.item ? ui.item.id : ""));
    23.                         //                 $( "#project-id" ).val( ui.item.value )="";
    24.                         //               $( "#project" ).val( ui.item.value )="";
    25.                         document.getElementById('rowxxx').disabled = true;
    26.                     }
    27.                     else
    28.                         document.getElementById('rowxxx').disabled = false;
    29.                 }
    30.             })
    31.                 .autocomplete("instance")._renderItem = function (ul, item) {
    32.                     return $("<li>")
    33.                         .append("<div>" + item.label + "<br>" + item.desc + "</div>")
    34.                         .appendTo(ul);
    35.                 };
    36.             $("#project").on("input", function () {
    37.                 var found = false;
    38.                 inp = $(this);
    39.                 $.each(projects, function (idx, item) {
    40.                     if (item.label == inp.val()) {
    41.                         found = true;
    42.                         return false;
    43.                     } else return true;
    44.                 });
    45.                 if (found) $("#rowxxx").prop("disabled", false);
    46.                 else $("#rowxxx").prop("disabled", true);
    47.             });
    48.         });
    49.     </script>
     
  3. tsunami

    tsunami Grünschnabel

    Hi,
    erstmal vielen Dank für die superschnelle Antwort! Hm, jedesmal alle durchsuchen geht wenn der User in nem Büro mit guter EDV und Internet sitzt.
    Wie gesagt so funktioniert der Autocomplete, nur muss ich jedemal "Tab" drücken, damit das Script eine Eingabekontrolle durchführt. Und da bin ich zuwenig javascripter, irgendwie müsste man einen anderen eventhandler nehmen.
    Rein vom Ablauf müsste er sich die Inhalt des EIngabefeldes merken und sobald die Anzahl der in der Liste enthaltener Elemente 0 ist, auslösen und zB den Submit ausblenden. Oder in sowas wie ein temp Array schreiben. Bei Banane, Birne, Apfel und Pflaume und der Eingabe "B", würde man dann alle Elemente die nicht mit "B" anfangen ignorieren und alle die mit "B" anfangen in das temp Array schreiben. Dann müsste er in diesem Fall nur zwei Elemente prüfen, bei "Ba" nur noch eins, Bei "Bax" hätte das array die Größe 0 und exit. Das Grundprinzip ist doch umgesetzt. Es wird in der Vorschlagsliste ja auch nur die passenden Vorschläge angezeigt. Nur die Limitierung fehlt.

    Vielleicht muss ich auch in die ganz andere Richtung und es mit datalist lösen, html5. Nur da habe ich keine Möglichkeit gefunden, die id zu übermitteln und den Namen an zu zeigen. Zudem wird es derzeit noch etwas unterschiedlich bei den Browsern gehandhabt.
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Wieviele Elemente hätte denn die endgültige Liste ungefähr?

    Glaube nicht, dass das ausreichend ist, denn wenn im Eingabefeld nur ein Teil des Elementes steht, ist die Liste nicht leer, aber Du willst auch nicht, dass es so abgeschickt wird.

    Daran hatte ich auch gedacht, aber wahrscheinlich ist das Anlegen eines temp-Arrays auch nicht performanter als ein Suchvorgang, denn es muss ja auch bei jeder Änderung im Eingabefeld aktualisiert werden.

    Möglicher Weise könnte man nur die gefilterte Teilliste durchsuchen, die das Autocomplete anzeigt. Offenbar ist diese in der Funktion _renderMenu( ul, items ) unter items verfügbar. Würde zwar nicht der Semantik entsprechen, aber sollte funktionieren. Würde dann so aussehen:
    Code (Javascript):
    1.             $("#project").autocomplete("instance")._renderMenu = function (ul, items) {
    2.                 var that = this;
    3.                 $.each( items, function( index, item ) {
    4.                     that._renderItemData( ul, item );
    5.                 });
    6.                 inp = $("#project");
    7.                 if (inp.val() == "") {
    8.                     $("#rowxxx").prop("disabled", true);
    9.                 } else {
    10.                     var found = false;
    11.                     $.each(items, function (idx, item) {
    12.                         if (item.label == inp.val()) {
    13.                             found = true;
    14.                             return false;
    15.                         } else return true;
    16.                     });
    17.                     if (found) $("#rowxxx").prop("disabled", false);
    18.                     else $("#rowxxx").prop("disabled", true);
    19.                 }
    20.             };
     
    Zuletzt bearbeitet: 13. Juli 2017
    tsunami gefällt das.
  5. MaxBiest

    MaxBiest Grünschnabel

    vlt hilft dir Folgendes:
    Code (HTML5):
    1. <!doctype html>
    2. <html lang="en">
    3.   <meta charset="utf-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1">
    5.   <title>jQuery UI Autocomplete - Custom data and display</title>
    6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    7.   <link rel="stylesheet" href="/resources/demos/style.css">
    8.   <style>
    9.   #project-label {
    10.     display: block;
    11.     font-weight: bold;
    12.     margin-bottom: 1em;
    13.   }
    14.   #project-icon {
    15.     float: left;
    16.     height: 32px;
    17.     width: 32px;
    18.   }
    19.   #project-description {
    20.     margin: 0;
    21.     padding: 0;
    22.   }
    23.   </style>
    24.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    25.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    26.   <script type="text/javascript">
    27.   var projects = [
    28. {value: "1",label:"Apfel"},{value: "2",label:"Birne"},{value: "3",label:"Banane"},{value: "4",label:"Pflaume"}    ];
    29.    
    30.   $( function() {
    31.    document.getElementById('rowxxx').disabled = true;
    32.    
    33.     $( "#project" ).autocomplete({
    34.             minLength: 0,
    35.             source: projects,
    36.             focus: function( event, ui ) {
    37.                 $( "#project" ).val( ui.item.label );
    38.                 return false;
    39.             },
    40.           select: function( event, ui ) {
    41.                 $( "#project" ).val( ui.item.label );
    42.                 $( "#project-id" ).val( ui.item.value );
    43.                 return false;
    44.             },
    45.       selectFirst: true,
    46. click: function (event, ui) {
    47.         if (ui.item == null){
    48.          //here is null if entered value is not match in suggestion list
    49.             $(this).val((ui.item ? ui.item.id : ""));
    50. //                 $( "#project-id" ).val( ui.item.value )="";
    51. //               $( "#project" ).val( ui.item.value )="";
    52. document.getElementById('rowxxx').disabled = true;
    53.         }
    54.         else
    55.         document.getElementById('rowxxx').disabled = false;
    56.     }
    57.         })
    58.         .autocomplete( "instance" )._renderItem = function( ul, item ) {
    59.             return $( "<li>" )
    60.                 .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
    61.                 .appendTo( ul );
    62.         };
    63.     } );
    64.    function pruefe(){
    65.        var i=0;
    66.        var equal=false;
    67.        while(i<projects.length){
    68.           if(document.Formular.nummer.value==projects[i].label || document.Formular.nummer.value==projects[i].label.toLowerCase()){equal=true;}
    69.           i++;
    70.       }
    71.       if(equal){
    72.           document.getElementById('rowxxx').disabled = false;
    73.       }else{
    74.           document.getElementById('rowxxx').disabled = true;
    75.       }
    76.   }
    77.  </script>
    78. </head>
    79. <div id="project-label">Select a project (type "j" for a start):</div>
    80. <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
    81. <form method="post" action="ajax2.php" name="Formular">
    82. <input type="text" id="project" onkeyup="pruefe()" name="nummer" placeholder="Project name">
    83. <input type="hidden" id="project-id" name="id">
    84. <input type="submit" id="rowxxx">   </form>
    85. </body>
    86. </html>
     
  6. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Das ist doch genau das gleiche wie das in meinem Posting #1. Die Liste muss bei jedem Tastendruck komplett abgesucht werden. Der TO hatte jedoch Bedenken, dass es nicht genügend performant ist, wenn es auf einem Gerät mit geringer Leistungsfähigkeit ausgeführt wird:
     
  7. MaxBiest

    MaxBiest Grünschnabel

    Stimmt sry.

    Könnte man mehrere Objekte anlegen, indem man alle möglichen Namen als Eigenschaft Name speichert und man dann mit der Value vom Input Feld direkt hinspringt? Das würde ja nur beim Erstellen der Objekte (Laden der Seite) Ressourcen verbrauchen, danach ja nicht mehr. Und man muss ja auch erst überprüfen, wenn der User eine Schreibpause einlegt -> 1 Sekunden Timer;

    Oder gibt es eine Dynamische Variablen Lösung, indem man den Namen als Variablenbezeichnung setzen kann und somit dann im nachhinein nur prüfen muss, ob diese Variable vorhanden ist?

    Ansonsten würde ich eine "LastHitID" Var setzen, die speichert, wo der erste Treffer beim letzten Suchen war und die Prüfung dann dort anfängt. Nachdem der User allerdings Backspace gedrückt hat, sollte die "LastHitID" sich verringern (lokales Array). Dies funktioniert halt nur, wenn der User linear schreibt und nicht plötzlich den ersten Buchstaben ändert etc.

    Man kann die Liste, falls sie nicht schon ist, lokal alphabetisch sortieren und die Prüfung dann aufhören, wenn der Buchstabe im Alphabet höher ist.
    man kann dann auch die Liste einteilen, das man den Index mit dem ersten Treffer zu jedem Buchstaben speichert, damit man die nächste Prüfung erst da beginnen muss. Oder man fängt erst dort an zu suchen, wo die Wahrscheinlichkeit am größten ist:
    Länge des Arrays/24
    Falls man nichts findet, weil der Buchstabe im Alphabet höher ist (Siehe oben) kann man ja wieder bei Lange/24 anfangen aber rückwärts "laufen", bis auch hier der Alphabet niedriger ist. Kombiniert mit dem 1 Sekunden Timer und der LastHitID müsste man einige Ressourcen sparen können.

    Was meinst du Sempervivum?
     
  8. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Wahrscheinlich willst Du auf so etwas hinaus:
    Code (Text):
    1. var projects = {"Apfel": 1, "Birne": 2, "Banane": 3, "Pflaume": 4};
    Dann ist von der Notation her ein Direktzugriff möglich:
    Code (Text):
    1. if (projects[inp.val()]) { /* Der String ist in der Liste */ }
    Ich bin aber skeptisch, ob das zwangsläufig effizienter ist, denn der Interpreter muss dennoch den Wert in dem Objekt aufsuchen.

    Ein gängiges Verfahren, um eine effiziente Suche zu implementieren, ist, das Array zu sortieren und dann eine binäre Suche durchzuführen:
    https://de.wikipedia.org/wiki/Binäre_Suche
    Auch daran habe ich gedacht, allerdings fällt dann zunächst der Aufwand für das Sortieren an und, damit man nicht bei jedem Tastendruck neu sortieren muss, das Array beibehalten und immer komplett (binär) durchsucht werden.
     
  9. MaxBiest

    MaxBiest Grünschnabel

    Nicht ganz sondern ein Skript, das einmal das Array durchläuft und für jeden Namen eine Variable anlegt, mit dem Wert als Bezeichnung. Also in etwa so:
    Code (Javascript):
    1. var ID=0:
    2. for(var i in Array){
    3. document.getElementsByTagName('head')[0].innerHTML+='<script type="text/javascript">'+i+'='+ID+';</script>';
    4. ID++;
    5. }
    Aber da ist denke ich sortieren besser.

    Nun ob ich das originale Array durchsuche oder das temporäre macht ja kein Unterschied, nur das sortieren und falls es ja schon sortiert ist, fällt auch das weg :)
    Außerdem glaube ich das wir beim ersten durchsuchen des Arrays nicht davon weg kommen, sondern erst beim zweiten mal.
    Außer ich verstehe das momentan falsch und es geht auch um RAM. Außerdem kann man dann doch das originale Array löschen.

    Was mir noch einfällt:
    Haben wir evtl. die Möglichkeit, beim laden der Seite, beziehungsweise des Arrays, es gleich zu sortieren, also die Funktion des Browsers schon zu ändern oder zu nutzen?
    Das wir vorm laden des Arrays ein lokales leeres Array erstellen, und dann während dem laden sortiert füllen, oder beim leerlauf der Seite?
    Vielleicht auch, das man beim ersten durchsuchen die Werte die er rausnimmt gleich einsortiert, solange er sucht und ab dem letzten Eintrag das Array ins sortierte "wechselt"?
    Falls die Liste irgendwo extern gespeichert ist, kann man ja jedesmal beim Leerlauf der Seite anfangen, das Array zu sortieren und ein einfachen Int Wert beim letzten sortierten Eintrag zu erstellen. So ist das Array stück für Stück sortiert, um dann die binäre Suche nutzen zu können.
    Beim nächsten Aufruf der Seite, wird dann dort weiter sortiert, wo die Int Variable hinzeigt.
    Ansonsten könnte ich mir nur vorstellen, im Binären Modus zu suchen, kombiniert mit dem 1 Sekunden Timer.
     
  10. tsunami

    tsunami Grünschnabel

    Hallo,
    erstmal sorry, hatte die letzten Tage nicht genug Zeit. Zweitens waow. Das sind einige Ansätze. Vielen Dank, Wie gesagt, php kann ich. Rein von der Logik kann man nicht hingehen und die Array-Ids nehmen, deren Werte zutreffen könnten. Und diese ids dann in eien Art Hilfsarray packen. Bei jedem Buchstaben müssten dann nur noch die ids des Hauptarray geprüft werden, die im Hilfs Array zu finden sind. Die Position des Cursors müsste man sich merken und wenn die neue position < alte Position ist, Hilfsarray leeren, weil xBanan würd ein 0 resultieren und wenn man dann das x löscht, würde 1 rauskommen.
    Bsp.: var Hauptarray {"Apfel": 1, "Birne": 2, "Banane": 3, "Pflaume": 4,"Ananas":5,"Anakonda":6};
    User gibt A ein -> var Hilfsarray: {1,5,6}
    Autotext zeigt nur Var redHauptarray {"Apfel":1,"Ananas":5,"Anakonda":6) Per if habe ich alle anderen ids übersprungen.
    Dann gibt der user N (AN) ein -> var Hilfsarray: {5,6}
    Autotext zeigt nur {"Ananas":5,"Anakonda":6}
    Das ausfiltern der Ids würde ich über ein Hilfs php Array machen. Denn dann verteile ich die Rechenlast auf Client und Server. Es geht max um 5000 Einträge. Wenn ich dann noch sage minLength=4, dann muss das Script erst ab dem dritten Buchstaben anfangen zu rechnen und die Einträge dürften sich deutlich reduzieren, wenn nicht gleich der erste Buchstabe ein Tippfehler ist.
    Dann hätte man bei Nachnamen zb "Schn" als Eingabe, Schmidt, Schmitt, Schulte, und 90% ausgeschlossen. Übrig bleiben würden dann doch nur vielleicht max. 50 (Schnieder, Schneider, Schnudke,...) Bei ASch wärs sofort 0. Gleiches bei den anderen Massennamen wie Meier und Müller. In China würde es nicht gehen vermutlich (5 Telefonbücher mit wang ;) und Amerika mit Jones ebenfalls nicht. Aber diese beiden Fälle werden nicht vorkommen.
    mfG
    tsunami
     
  11. tsunami

    tsunami Grünschnabel

    PS Sortiert ist schon, Sql Abfrage sort by nachname asc, aber dann müsste es doch gehen, weil ich da doch nur die Position > der aktuellen durchsuchen muss.
     
  12. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Leider verstehe ich nicht ganz, wie Du das mit dem Hilfsarray meinst.
    Eine binäre Suche ist sehr effektiv und bei einer Anzahl von 5000 erwarte ich keine Probleme.
    Laut der Formel von Wikipedia sind für eine Suche in 5000 Einträgen nur 13 Vergleichsschritte erforderlich!
     
  13. tsunami

    tsunami Grünschnabel

    Hi,
    also ich meinte, dass man ein Array erzeugt, wo nur die passenden Ids reinkommen. Ab dem 4. Zeichen. Also man gibt Sch -> Schulte, Schmit, Schmidt, Schnieder usw.
    Nun ist das 4. Zeichen ein "m" Also Schm. Dann nimmt man alle ids die zu Schm passen in ein Array und dann via sql-Abfrage alle Datensätze deren id in der Datenbank sind. Das EIngangsbeispiel tuts. Eigendlich brauche ich nur noch einen Änderung des Events. Also Dass ich nicht erst Tab drücken muss.
    Was ich möchte, ist dass :
    der Benutzer Schm eingibt, es wird nur eine Liste der vorhandenen Datensätze angezeigt zB 12,
    submit wird eingeblendet
    dann gibt man x ein -> Schmx - Datensätze 0,
    Submit wird sofort ausgeblendet, nicht erst nachdem ich tab gedrückt habe (wie jetzt),
    lösche ich das x, erscheint das Submit wieder.

    Gebe ich xyz1 ein bleibt das submit ausgeblendet. Übermittelt werden soll dann natürlich die id des gewählten Datensatzes, wie beim select, wo ich den value habe und den Namen.

    Hoffe ich habe mich nun klarer ausgedrückt?
     
  14. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ich glaube, jetzt verstehe ich, was Du meinst. Dieses Array brauchst Du nicht anzulegen, sondern es ist bereits durch das Autocomplete-Skript verfügbar, siehe mein Posting #4.
     
  15. tsunami

    tsunami Grünschnabel

    Hm, ich habe es eingebaut. aber leider passiert nix. Irgendwo ist noch ein Bock...
     
  16. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ich hatte es getestet und es hatte funktioniert. Hast Du deine Version online? Dann poste die URL.
     
  17. tsunami

    tsunami Grünschnabel

    Erstmal nur lokal, Quellcode?
     
  18. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ja sicher, dann trage ich ihn in eine Testseite ein.
     
  19. tsunami

    tsunami Grünschnabel

    HTML:
    1. <!doctype html>
    2. <html lang="en">
    3.   <meta charset="utf-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1">
    5.   <title>jQuery UI Autocomplete - Custom data and display</title>
    6.   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    7.  
    8.  
    9.   <style>
    10.   #project-label {
    11.     display: block;
    12.     font-weight: bold;
    13.     margin-bottom: 1em;
    14.   }
    15.   #project-icon {
    16.     float: left;
    17.     height: 32px;
    18.     width: 32px;
    19.   }
    20.   #project-description {
    21.     margin: 0;
    22.     padding: 0;
    23.   }
    24.   </style>
    25.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    26.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    27. $(function () {
    28.             var projects = [
    29.         { value: "1", label: "Apfel" }, { value: "2", label: "Birne" }, { value: "3", label: "Banane" }, { value: "4", label: "Pflaume" }];
    30.             $("#project").autocomplete({
    31.                 minLength: 0,
    32.                 source: projects,
    33.                 focus: function (event, ui) {
    34.                     $("#project").val(ui.item.label);
    35.                     return false;
    36.                 },
    37.                 select: function (event, ui) {
    38.                     $("#project").val(ui.item.label);
    39.                     $("#project-id").val(ui.item.value);
    40.                     $("#rowxxx").prop("disabled", false);
    41.                     return false;
    42.                 },
    43.                 selectFirst: true,
    44.                 click: function (event, ui) {
    45.                     if (ui.item == null) {
    46.                         //here is null if entered value is not match in suggestion list
    47.                         $(this).val((ui.item ? ui.item.id : ""));
    48.                         //                 $( "#project-id" ).val( ui.item.value )="";
    49.                         //               $( "#project" ).val( ui.item.value )="";
    50.                         document.getElementById('rowxxx').disabled = true;
    51.                     }
    52.                     else
    53.                         document.getElementById('rowxxx').disabled = false;
    54.                 }
    55.             })
    56.                 $("#project").autocomplete("instance")._renderMenu = function (ul, items) {
    57.                 var that = this;
    58.                 $.each( items, function( index, item ) {
    59.                     that._renderItemData( ul, item );
    60.                 });
    61.                 inp = $("#project");
    62.                 if (inp.val() == "") {
    63.                     $("#rowxxx").prop("disabled", true);
    64.                 } else {
    65.                     var found = false;
    66.                     $.each(items, function (idx, item) {
    67.                         if (item.label == inp.val()) {
    68.                             found = true;
    69.                             return false;
    70.                         } else return true;
    71.                     });
    72.                     if (found) $("#rowxxx").prop("disabled", false);
    73.                     else $("#rowxxx").prop("disabled", true);
    74.                 }
    75.             };
    76.     </script>
    77.  
    78.  
    79. </head>
    80. <div id="project-label">Select a project (type "j" for a start):</div>
    81. <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
    82. <form method="post" action="ajax2.php">
    83. <input id="project" name="nummer" placeholder="fucking Javascript">
    84. <input type="hidden" id="project-id" name="id">
    85. <input type="submit" id="rowxxx">   </form>
    86. </body>
    87. </html>
     
  20. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Da fehlen die schließenden Klammern für das $(function():
    Code (Text):
    1.     <script>
    2.         $(function () {
    3.             var projects = [
    4.         { value: "1", label: "Apfel" }, { value: "2", label: "Birne" }, { value: "3", label: "Banane" }, { value: "4", label: "Pflaume" }];
    5.             $("#project").autocomplete({
    6.                 minLength: 0,
    7.                 source: projects,
    8.                 focus: function (event, ui) {
    9.                     $("#project").val(ui.item.label);
    10.                     return false;
    11.                 },
    12.                 select: function (event, ui) {
    13.                     $("#project").val(ui.item.label);
    14.                     $("#project-id").val(ui.item.value);
    15.                     $("#rowxxx").prop("disabled", false);
    16.                     return false;
    17.                 },
    18.                 selectFirst: true,
    19.                 click: function (event, ui) {
    20.                     if (ui.item == null) {
    21.                         //here is null if entered value is not match in suggestion list
    22.                         $(this).val((ui.item ? ui.item.id : ""));
    23.                         //                 $( "#project-id" ).val( ui.item.value )="";
    24.                         //               $( "#project" ).val( ui.item.value )="";
    25.                         document.getElementById('rowxxx').disabled = true;
    26.                     }
    27.                     else
    28.                         document.getElementById('rowxxx').disabled = false;
    29.                 }
    30.             })
    31.             $("#project").autocomplete("instance")._renderMenu = function (ul, items) {
    32.                 var that = this;
    33.                 $.each(items, function (index, item) {
    34.                     that._renderItemData(ul, item);
    35.                 });
    36.                 inp = $("#project");
    37.                 if (inp.val() == "") {
    38.                     $("#rowxxx").prop("disabled", true);
    39.                 } else {
    40.                     var found = false;
    41.                     $.each(items, function (idx, item) {
    42.                         if (item.label == inp.val()) {
    43.                             found = true;
    44.                             return false;
    45.                         } else return true;
    46.                     });
    47.                     if (found) $("#rowxxx").prop("disabled", false);
    48.                     else $("#rowxxx").prop("disabled", true);
    49.                 }
    50.             };
    51.         }); // dies fehlte
    52.     </script>
     
Die Seite wird geladen...