[FRAGE] Dropdown Suche Autovervollständigung, Link öffnen bei Klick

[eter]

Die Suche ansich war das Problem nicht, aber ich habe mehr Felder gebraucht und die Suche sollte alle aufeinanderfolgenden Buchstaben in allen Werten suchen und ausgeben.
Das habe ich noch hin bekommen, aber die Ausgabe war dann ohne Verlinkung zur Tabelle, haben sich irgendwie die zwei javascripte nicht verstanden.
Deshalb habe ich für die Suche das hier verwendet und angepasst:
Guide to EasyAutocomplete - jQuery autocomplete plugin (Template - links)
Habe ich dann meine Optionsfelder per Stapelverarbeitung umgeschrieben.
Funzt genau so, wie ich es wollte, wie gesagt, musste halt doppelt arbeiten und vor allem lange suchen.

 

[tsseh]

Die Suche ansich war das Problem nicht, aber ich habe mehr Felder gebraucht

was verstehst du unter "ich habe mehr Felder gebraucht"?

und die Suche sollte alle aufeinanderfolgenden Buchstaben in allen Werten suchen und ausgeben.

genau das wird dort gemacht

Das habe ich noch hin bekommen, aber die Ausgabe war dann ohne Verlinkung zur Tabelle,

die "Ausgabe mit Verlinkung zur Tabelle" ist auch was anderes
* teil 1: suche
* teil 2: "Ausgabe mit Verlinkung zur Tabelle"

Deshalb habe ich für die Suche das hier verwendet und angepasst:
Guide to EasyAutocomplete - jQuery autocomplete plugin (Template - links)
Habe ich dann meine Optionsfelder per Stapelverarbeitung umgeschrieben.

geht auch, wenn das vorhandene select element mit den options aber verwendet wird finde ich das besser
aber egal, das ist teil 1
teil 2 ist dann im onchange den link zu erstellen, oder location.href zu setzen, das ist aber (auch im vergleich zu teil 1) eine kleinigkeit

 

[eter]

Na, hätte ich mich sehr gut ausgekannt, hätte ich ja nicht gefragt
Das Problem war, dass ich das, wie am Anfang schon geschrieben, am liebsten im Dropdown gehabt hätte, also einfach erweitern.
Eben das ging nicht so, wie ich das wollte und das war meine Frage, ob das überhaupt geht, innerhalb eines Dropdowns.

Es sind über 10000 Tabellen in unfassbar vielen Unterordnern, das war so nicht mehr zu händeln.
Deshalb brauchte ich eine Suche, wo ich u.a. auch die Rubriken suchen kann.
Und das nun local auf Linux, Windows, Android und Mac, um auch mit den Tablets arbeiten zu können ...
Die Systemsuche mit Windows oder Linux war da nicht ausreichend und teilweise sehr lahm.
Mit Android schlimm

So habe ich nun Tabellentitel, Rubrik, Unterrubrik, freier Text sowie den Link zur Tabelle und wäre erweiterbar, aber so langt das schon.
Schnell ist es auch noch.
Praktische Geschichte, er zeigt mir in der Suche alles an und umso mehr Buchstaben ich tippe, umso exakter wird die Ausgabe der Suche.

Perfekt ;-)

 

[tsseh]

Na, hätte ich mich sehr gut ausgekannt, hätte ich ja nicht gefragt

ist ja kein problem, aber man sollte wenigstens beschreiben können was man haben möchte.
ist das nach den ersten paar zeilen nicht klar, lese ich schon überhaupt nicht weiter.
dann wäre es an dir gewesen nochmal nachzuhaken, warum keiner antwortet. du bist aber abgegangen wie ne rakete.

Das Problem war, dass ich das, wie am Anfang schon geschrieben, am liebsten im Dropdown gehabt hätte, also einfach erweitern.
Eben das ging nicht so, wie ich das wollte und das war meine Frage, ob das überhaupt geht, innerhalb eines Dropdowns.

als erweiterung des dropdowns, ja, ist ja nun auch geklärt.

Es sind über 10000 Tabellen in unfassbar vielen Unterordnern, das war so nicht mehr zu händeln.

10000 options in einem select element welche als value die url einer html seite haben, welche vielleicht tabellen enthalten(das ist aber schon wieder egal)

Deshalb brauchte ich eine Suche, wo ich u.a. auch die Rubriken suchen kann.

keine ahnung, was deine rubriken jetzt wieder sind, das kommt hier zum 1. mal

Und das nun local auf Linux, Windows, Android und Mac

standard (local vielleicht nicht, aber zu 99% läuft alles auch lokal was du mit js machst)

So habe ich nun Tabellentitel, Rubrik, Unterrubrik, freier Text sowie den Link zur Tabelle und wäre erweiterbar, aber so langt das schon.
Schnell ist es auch noch.

ok

 

[eter]

Ja, viele Tabellen.
Ich habe mehrere Dropdowns, aufgeteilt in Rubriken/Themen.

Ich habe mir den Inhalt vom Hauptordner mit Struktur als html ausgeben lassen und dann per Stapelverarbeitung die Dropdowns gebastelt, genauso dann auch die Suche, ging also noch.

Zum Glück hatte ich von Anfang an die Tabellennamen nach ordner-unterordner.html angelegt, so war das ganze im erträglichen Bereich.

Ja, ging ich ab, sorry.

Aber ich sah die Klicks auf mein Post und derweil Antworten in anderen Posts, dachte ich halt, irgend etwas stimmt nicht.
Dann fragt noch jemand nach php, sql und welches Format die Tabellen haben ... :icon8:

Die Hauptfrage war eigentlich, ob das alles im Dropdown geht.
Mit meiner jetzigen Lösung sehe ich, das hätte ich innerhalb meiner Dropdowns nicht machen können oder zumindest nicht so perfekt, wie es nun ist.

Nix für ungut :icon6:

 

[tsseh]

Ja, viele Tabellen.

mit tabellen hat dein problem nichts zu tun

Ich habe mehrere Dropdowns, aufgeteilt in Rubriken/Themen.

für mehrere selects müsstest du das etwas anpassen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Combobox</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    .custom-combobox {
      position: relative;
      display: inline-block;
    }
    .custom-combobox-toggle {
      position: absolute;
      top: 0;
      bottom: 0;
      margin-left: -1px;
      padding: 0;
    }
    .custom-combobox-input {
      margin: 0;
      padding: 5px 10px;
    }
  </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() {
      $.widget("custom.combobox",
      {
        _create: function()
        {
          this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .appendTo(this.element);
   
          this._createAutocomplete();
          this._createShowAllButton();
        },
   
        _createAutocomplete: function()
        {
          var $src = $(this.option("src"));
          $src.hide();
          
          var selected = $src.children( ":selected" ).first();
          var value = selected.val() ? selected.text() : "";
   
          this.input = $( "<input>" )
            .appendTo( this.wrapper )
            .val( value )
            .attr( "title", "" )
            .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
            .autocomplete({
              delay: 0,
              minLength: 0,
              source: $.proxy( this, "_source" )
            })
            .tooltip({
              classes: {
                "ui-tooltip": "ui-state-highlight"
              }
            });
   
          this._on( this.input, {
            autocompleteselect: function(event, ui)
            {
              ui.item.option.selected = true;
              this._trigger( "select", event, {
                item: ui.item.option
              });
            }
          });
        },
   
        _createShowAllButton: function()
        {
          var input = this.input;
          var wasOpen = false;
   
          $("<a>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .tooltip()
            .appendTo(this.wrapper)
            .button({
              icons: {
                primary: "ui-icon-triangle-1-s"
              },
              text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "custom-combobox-toggle ui-corner-right" )
            .on( "mousedown", function()
            {
              wasOpen = input.autocomplete("widget").is(":visible");
            })
            .on( "click", function()
            {
              input.trigger("focus");
   
              // Close if already visible
              if (wasOpen)
              {
                return;
              }
   
              // Pass empty string as value to search for, displaying all results
              input.autocomplete( "search", "" );
            });
        },
   
        _source: function( request, response )
        {
          var $src = $(this.option("src"));
          var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
          response($src.children("option").map(function()
          {
            var text = $(this).val();
            if (this.value && (!request.term || matcher.test(text)))
              return {
                label: text,
                value: text,
                option: this
              };
          }));
        },
   
        _destroy: function()
        {
          var $src = $(this.option("src"));
          this.wrapper.remove();
          $src.show();
        }
      });
   
      $("#dst").combobox({ src: "select" });
      $("select").toggle();
      $("select").on("change", function(e)
      {
        $("#link").empty();
        $("<a>")
          .attr("href", $(this).children(":selected").val())
          .html($(this).children(":selected").text())
          .appendTo($("#link"));
      });
    });
  </script>
</head>
  <body>
    <div id="link"></div>
    <div id="dst" class="ui-widget">
      <select id="Tabellen" size="5">
        <option selected value="liste_privat/eigene_tabellen/tabelle1.html">Eigene Tabelle1</option>
        <option value="liste_privat/eigene_tabellen/tabelle2.html">Eigene Tabelle2</option>
        <option value="liste_privat/eigene_tabellen/tabelle3.html">Eigene Tabelle3</option>
        <option value="liste_privat/eigene_tabellen/tabelle4.html">Eigene Tabelle4</option>
        <option value="liste_privat/eigene_tabellen/tabelle5.html">Eigene Tabelle5</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle1.html">Private Vorlagen Tabelle1</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle2.html">Private Vorlagen Tabelle2</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle3.html">Private Vorlagen Tabelle3</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle4.html">Private Vorlagen Tabelle4</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle5.html">Private Vorlagen Tabelle5</option>
      </select>
      <select id="Tabellen2" size="5">
        <option value="liste_privat/eigene_tabellen/tabelle1.html">Eigene Tabelle1</option>
        <option selected value="liste_privat/eigene_tabellen/tabelle2.html">Eigene Tabelle2</option>
        <option value="liste_privat/eigene_tabellen/tabelle3.html">Eigene Tabelle3</option>
        <option value="liste_privat/eigene_tabellen/tabelle4.html">Eigene Tabelle4</option>
        <option value="liste_privat/eigene_tabellen/tabelle5.html">Eigene Tabelle5</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle1.html">Private Vorlagen Tabelle1</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle2.html">Private Vorlagen Tabelle2</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle3.html">Private Vorlagen Tabelle3</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle4.html">Private Vorlagen Tabelle4</option>
        <option value="liste_privat/vorlagen_tabellen/tabelle5.html">Private Vorlagen Tabelle5</option>
      </select>
    </div>
  </body>
</html>

ich glaube verstanden zu haben, dass du über die values der options suchen möchtest und nicht über den text.
die selects habe ich auch wieder eingeblendet, da du das auch wolltest soweit ich das verstanden habe(dann könnte man auch gleich das ausblenden weglassen).

Dann fragt noch jemand nach php, sql und welches Format die Tabellen haben

das war ich, weil bei

Ich habe einen Haufen Tabellen, die ich mit einer Suche schneller finden will.

denkt kein mensch an options in einem select die du eigentlich durchsuchen wolltest