如何使數據列表匹配結果從開始只

我特林讓DataList控件的HTML我這裏是如何使數據列表匹配結果從開始只

<h1>Datalist Demo</h1> 
<label for="default">Pick a programming language</label> 
<input type="text" id="default" list="languages"> 
<datalist id="languages"> 
    <option value="HTML"> 
    <option value="CSS"> 
    <option value="JavaScript"> 
    <option value="Java"> 
    <option value="Ruby And Go"> 
    <option value="PHP And HTML"> 
    <option value="Go"> 
    <option value="Erlang"> 
    <option value="Python And C++"> 
    <option value="C"> 
    <option value="C#"> 
    <option value="C++"> 
</datalist>

但是當我搜索「走出去」它告訴我2個結果

Ruby And Go
Go

Result When i Search for 'go'

我想它應該只顯示匹配輸入文本的開始和不從內部的術語。
就像當我搜索「走出去」只有一個結果應該顯示

Go

我要實現這個就超過5000條記錄存儲在MySQL。

來源

2017-03-04 Aashit Vyom

我不認爲這是一個好主意，有所有5000條記錄中的數據列表加載，我會建議去爲自動完成/提前輸入控件（大量的jQuery插件可用），並命中服務器以檢索符合您需要的規則的記錄。併爲您的問題 - http://stackoverflow.com/questions/29154877/use-html5-datalist-autocomplete-with-contains-approach-not-just-starts-wit - 可能會幫助 – Developer

可能的重複[使用HTML5（datalist ）使用'contains'方法自動完成，而不僅僅是'開始']（http://stackoverflow.com/questions/29154877/use-html5-datalist-autocomplete-with-contains-approach-not-just-starts-wit）。我知道這在技術上是相反的問題，但控制''行爲的基本願望是相同的。 – gyre

我建議你使用str.length方法。對於這個例子，得到'Ruby和Go'的長度和'Go'的長度並且只返回Go。你必須考慮在Go之前的可能空間入口。 – liontass

精確匹配，你可以在input事件動態設置pattern屬性值RegExp[\\w\\s+#]{${this.value.length}}

<h1>Datalist Demo</h1> 
 
<label for="default">Pick a programming language</label> 
 
<input type="text" id="default" list="languages" pattern=""> 
 
<datalist id="languages"> 
 
    <option value="HTML"> 
 
    <option value="CSS"> 
 
    <option value="JavaScript"> 
 
    <option value="Java"> 
 
    <option value="Ruby And Go"> 
 
    <option value="PHP And HTML"> 
 
    <option value="Go"> 
 
    <option value="Erlang"> 
 
    <option value="Python And C++"> 
 
    <option value="C"> 
 
    <option value="C#"> 
 
    <option value="C++"> 
 
</datalist> 
 
<script> 
 
    document.querySelector("#default") 
 
    .oninput = function() { 
 
    this.pattern = `[\\w\\s+#]{${this.value.length}}`; 
 
    } 
 
</script>

來源

2017-03-04 07:12:48 guest271314

如何使數據列表匹配結果從開始只

回答

相關問題