Verwenden HTML5 (Datalist) zum automatischen Vervollständigung mit ‚enthält‘ Ansatz, nicht nur ‚beginnt mit‘

Question

(ich es nicht finden können, aber dann wieder, weiß ich wirklich nicht, wie es zu suchen.)

I möchte <input list=xxx> und <datalist id=xxx> verwenden, um Autovervollständigung zu erhalten, ABER ich möchte, dass der Browser alle Optionen nach "enthält" Ansatz statt "beginnt mit", die Standard zu sein scheint. Gibt es einen Weg?

Wenn nicht einfach, gibt es eine Möglichkeit, Vorschläge zu erzwingen, die ich zeigen möchte, nicht diejenigen, die der Browser angepasst hat? Sagen wir, ich tippe "foo" und möchte die Optionen "bar" und "baz" anzeigen. Kann ich das dem Benutzer aufzwingen? Wenn ich den Datalist nur mit denen (mit JS) fülle, wird der Browser immer noch die "Starts mit" Prüfung durchführen und sie herausfiltern.

Ich möchte die ultimative Kontrolle darüber, wie die Datenlistenoptionen zeigen. NICHT über seine Benutzeroberfläche, Flexibilität, Zugänglichkeit usw., also möchte ich es nicht komplett neu machen. Schlagen Sie nicht einmal ein jQuery-Plugin vor.

Wenn ich Formelement-Validierung ultimativ kontrollieren kann, warum nicht Autovervollständigung, richtig?

bearbeiten: Ich sehe jetzt, dass Firefox die 'enthält' Ansatz verwendet ... Das ist nicht einmal ein Standard? Irgendeine Möglichkeit, dies zu erzwingen? Kann ich den Weg von Firefox ändern?

edit: ich dies gemacht zu illustrieren, was Ich mag würde: http://jsfiddle.net/rudiedirkx/r3jbfpxw/

• HTMLWG's specs on [list]
• W3's specs on datalist
• DavidWalsh example
• HONGKIAT's summary on behaviors..?

Answer 1

'enthält' Ansatz

Vielleicht ist das, was Sie suchen (Teil 1 Ihrer Frage).

Es geht mit der Begrenzung von "beginnt mit" und ändert sich, wenn eine Auswahl getroffen wird.

'use strict'; 
 
function updateList(that) { 
 
    if (!that) { 
 
     return; 
 
    } 
 
    var lastValue = that.lastValue, 
 
     value = that.value, 
 
     array = [], 
 
     pos = value.indexOf('|'), 
 
     start = that.selectionStart, 
 
     end = that.selectionEnd, 
 
     options; 
 

 
    if (that.options) { 
 
     options = that.options; 
 
    } else { 
 
     options = Object.keys(that.list.options).map(function (option) { 
 
      return that.list.options[option].value; 
 
     }); 
 
     that.options = options; 
 
    } 
 

 
    if (lastValue !== value) { 
 
     that.list.innerHTML = options.filter(function (a) { 
 
      return ~a.toLowerCase().indexOf(value.toLowerCase()); 
 
     }).map(function (a) { 
 
      return '<option value="' + value + '|' + a + '">' + a + '</option>'; 
 
     }).join(); 
 
     updateInput(that); 
 
     that.lastValue = value; 
 
    } 
 
} 
 

 
function updateInput(that) { 
 
    if (!that) { 
 
     return; 
 
    } 
 
    var value = that.value, 
 
     pos = value.indexOf('|'), 
 
     start = that.selectionStart, 
 
     end = that.selectionEnd; 
 

 
    if (~pos) { 
 
     value = value.slice(pos + 1); 
 
    } 
 
    that.value = value; 
 
    that.setSelectionRange(start, end); 
 
} 
 

 
document.getElementsByTagName('input').browser.addEventListener('keyup', function (e) { 
 
    updateList(this); 
 
}); 
 
document.getElementsByTagName('input').browser.addEventListener('input', function (e) { 
 
    updateInput(this); 
 
});

<input list="browsers" name="browser" id="browser" onkeyup="updateList();" oninput="updateInput();"> 
 
<datalist id="browsers"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Firefox"> 
 
    <option value="Chrome"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
</datalist>

bearbeiten

Ein anderer Ansatz, die Suche Inhalt angezeigt wird, klar zu machen, was passiert. Dies funktioniert auch in Chrome. Inspiriert von Show datalist labels but submit the actual value

'use strict'; 
 
var datalist = { 
 
     r: ['ralph', 'ronny', 'rudie'], 
 
     ru: ['rudie', 'rutte', 'rudiedirkx'], 
 
     rud: ['rudie', 'rudiedirkx'], 
 
     rudi: ['rudie'], 
 
     rudo: ['rudolf'], 
 
     foo: [ 
 
      { value: 42, text: 'The answer' }, 
 
      { value: 1337, text: 'Elite' }, 
 
      { value: 69, text: 'Dirty' }, 
 
      { value: 3.14, text: 'Pi' } 
 
     ] 
 
    }, 
 
    SEPARATOR = ' > '; 
 

 
function updateList(that) { 
 
    var lastValue = that.lastValue, 
 
     value = that.value, 
 
     array, 
 
     key, 
 
     pos = value.indexOf('|'), 
 
     start = that.selectionStart, 
 
     end = that.selectionEnd; 
 

 
    if (lastValue !== value) { 
 
     if (value !== '') { 
 
      if (value in datalist) { 
 
       key = value; 
 
      } else { 
 
       Object.keys(datalist).some(function (a) { 
 
        return ~a.toLowerCase().indexOf(value.toLowerCase()) && (key = a); 
 
       }); 
 
      } 
 
     } 
 
     that.list.innerHTML = key ? datalist[key].map(function (a) { 
 
      return '<option data-value="' + (a.value || a) + '">' + value + (value === key ? '' : SEPARATOR + key) + SEPARATOR + (a.text || a) + '</option>'; 
 
     }).join() : ''; 
 
     updateInput(that); 
 
     that.lastValue = value; 
 
    } 
 
} 
 

 
function updateInput(that) { 
 
    var value = that.value, 
 
     pos = value.lastIndexOf(SEPARATOR), 
 
     start = that.selectionStart, 
 
     end = that.selectionEnd; 
 

 
    if (~pos) { 
 
     value = value.slice(pos + SEPARATOR.length); 
 
    } 
 
    Object.keys(that.list.options).some(function (option) { 
 
     var o = that.list.options[option], 
 
      p = o.text.lastIndexOf(SEPARATOR); 
 
     if (o.text.slice(p + SEPARATOR.length) === value) { 
 
      value = o.getAttribute('data-value'); 
 
      return true; 
 
     } 
 
    }); 
 
    that.value = value; 
 
    that.setSelectionRange(start, end); 
 
} 
 

 
document.getElementsByTagName('input').xx.addEventListener('keyup', function (e) { 
 
    updateList(this); 
 
}); 
 
document.getElementsByTagName('input').xx.addEventListener('input', function (e) { 
 
    updateInput(this); 
 
});

<input list="xxx" name="xx" id="xx"> 
 
<datalist id="xxx" type="text"></datalist>

Answer 2

diese fiddle here hat geknackt, was Sie für fragen Aber ich bin nicht sicher, wie es ohne diese Abhängigkeit machen arbeiten, wie die Benutzeroberfläche etwas seltsam aussieht und fehl am Platz, wenn zusammen mit Bootstrap verwendet.

elem.autocomplete({ 
    source: list.children().map(function() { 
     return $(this).text(); 
    }).get() 

Answer 3

Dieser Thread wurde vor etwa 2 Jahren gepostet.aber wenn Sie diesen Thread lesen, müssen Sie vielleicht eine neuere Version Ihres Browsers überprüfen:

Aktuelle Spezifikation: https://html.spec.whatwg.org/multipage/forms.html#the-list-attribute

User agents are encouraged to filter the suggestions represented by the suggestions source element when the number of suggestions is large, including only the most relevant ones (e.g. based on the user's input so far). No precise threshold is defined, but capping the list at four to seven values is reasonable. If filtering based on the user's input, user agents should use substring matching against both the suggestions' label and value.

Und wenn dieser Beitrag geschrieben, das Verhalten von Firefox (51) und Chrome (56) wurde bereits geändert, um der Spezifikation zu entsprechen.

was bedeutet, was op will, sollte gerade jetzt funktionieren.