✔ Autocomplete Beschränkung auf Liste

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.
 
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!
 
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?
 
Nun ist das 4. Zeichen ein "m" Also Schm. Dann nimmt man alle ids die zu Schm passen in ein Array
Zum Vergrößern anklicken....
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.
 
HTML: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Custom data and display</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-icon {
    float: left;
    height: 32px;
    width: 32px;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
            var projects = [
        { value: "1", label: "Apfel" }, { value: "2", label: "Birne" }, { value: "3", label: "Banane" }, { value: "4", label: "Pflaume" }];
            $("#project").autocomplete({
                minLength: 0,
                source: projects,
                focus: function (event, ui) {
                    $("#project").val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $("#project").val(ui.item.label);
                    $("#project-id").val(ui.item.value);
                    $("#rowxxx").prop("disabled", false);
                    return false;
                },
                selectFirst: true,
                click: function (event, ui) {
                    if (ui.item == null) {
                        //here is null if entered value is not match in suggestion list
                        $(this).val((ui.item ? ui.item.id : ""));
                        //                 $( "#project-id" ).val( ui.item.value )="";
                        //               $( "#project" ).val( ui.item.value )="";
                        document.getElementById('rowxxx').disabled = true;
                    }
                    else
                        document.getElementById('rowxxx').disabled = false;
                }
            })
                $("#project").autocomplete("instance")._renderMenu = function (ul, items) {
                var that = this;
                $.each( items, function( index, item ) {
                    that._renderItemData( ul, item );
                });
                inp = $("#project");
                if (inp.val() == "") {
                    $("#rowxxx").prop("disabled", true);
                } else {
                    var found = false;
                    $.each(items, function (idx, item) {
                        if (item.label == inp.val()) {
                            found = true;
                            return false;
                        } else return true;
                    });
                    if (found) $("#rowxxx").prop("disabled", false);
                    else $("#rowxxx").prop("disabled", true);
                }
            };
    </script>


</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<form method="post" action="ajax2.php">
<input id="project" name="nummer" placeholder="fucking Javascript">
<input type="hidden" id="project-id" name="id">
<input type="submit" id="rowxxx">   </form>
</body>
</html>
 
Da fehlen die schließenden Klammern für das $(function():
Code: 
    <script>
        $(function () {
            var projects = [
        { value: "1", label: "Apfel" }, { value: "2", label: "Birne" }, { value: "3", label: "Banane" }, { value: "4", label: "Pflaume" }];
            $("#project").autocomplete({
                minLength: 0,
                source: projects,
                focus: function (event, ui) {
                    $("#project").val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $("#project").val(ui.item.label);
                    $("#project-id").val(ui.item.value);
                    $("#rowxxx").prop("disabled", false);
                    return false;
                },
                selectFirst: true,
                click: function (event, ui) {
                    if (ui.item == null) {
                        //here is null if entered value is not match in suggestion list
                        $(this).val((ui.item ? ui.item.id : ""));
                        //                 $( "#project-id" ).val( ui.item.value )="";
                        //               $( "#project" ).val( ui.item.value )="";
                        document.getElementById('rowxxx').disabled = true;
                    }
                    else
                        document.getElementById('rowxxx').disabled = false;
                }
            })
            $("#project").autocomplete("instance")._renderMenu = function (ul, items) {
                var that = this;
                $.each(items, function (index, item) {
                    that._renderItemData(ul, item);
                });
                inp = $("#project");
                if (inp.val() == "") {
                    $("#rowxxx").prop("disabled", true);
                } else {
                    var found = false;
                    $.each(items, function (idx, item) {
                        if (item.label == inp.val()) {
                            found = true;
                            return false;
                        } else return true;
                    });
                    if (found) $("#rowxxx").prop("disabled", false);
                    else $("#rowxxx").prop("disabled", true);
                }
            };
        }); // dies fehlte
    </script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück