類似數據列表

我在html中搜索類似datalist的東西。當我在html輸入中輸入內容時，它會在數據庫中顯示類似的標題。當我輸入更多內容時，ajax會向我顯示更好的匹配標題。我有這個ajax腳本，但我的問題在這裏：我怎樣才能在輸入文本下呈現這個標題？類似數據列表

我在google上看到它只有ul和li標籤，而且都是？ google search example

但在w3schools example我們可以看到更好的解決方案。

哪一個更好？或者如果你知道其他技術，請告訴我。不知道在我的搜索工具中使用哪一個。

來源

2016-01-24 kjugi

你的鏈接是非常有幫助的，但我並不熱衷於添加插件到這個困境。我發現這[這個]（http://codepen.io/matt-west/pen/jKnzG） – kjugi

我想我找到解決方案的評論與有用的鏈接，不記得是誰，因爲他刪除了他的評論。

通過這個環節，我開始seraching DataList和發現的文章： blog link

在這裏，我們對數據列表一些短語和非常有用的例子：

<div id="page-wrapper"> 
    <h1>Datalist Element Demo</h1> 

    <label for="default">Pick a programming language</label> 
    <input type="text" id="default" list="languages" placeholder="e.g. JavaScript"> 

    <datalist id="languages"> 
    <option value="HTML"> 
    <option value="CSS"> 
    <option value="JavaScript"> 
    <option value="Java"> 
    <option value="Ruby"> 
    <option value="PHP"> 
    <option value="Go"> 
    <option value="Erlang"> 
    <option value="Python"> 
    <option value="C"> 
    <option value="C#"> 
    <option value="C++"> 
    </datalist> 


    <label for="ajax">Pick an HTML Element (options loaded using AJAX)</label> 
    <input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist"> 
    <datalist id="json-datalist"></datalist> 


</div> 

<script> 
    // Get the <datalist> and <input> elements. 
    var dataList = document.getElementById('json-datalist'); 
    var input = document.getElementById('ajax'); 

    // Create a new XMLHttpRequest. 
    var request = new XMLHttpRequest(); 

    // Handle state changes for the request. 
    request.onreadystatechange = function(response) { 
     if (request.readyState === 4) { 
     if (request.status === 200) { 
      // Parse the JSON 
      var jsonOptions = JSON.parse(request.responseText); 

      // Loop over the JSON array. 
      jsonOptions.forEach(function(item) { 
      // Create a new <option> element. 
      var option = document.createElement('option'); 
      // Set the value using the item in the JSON array. 
      option.value = item; 
      // Add the <option> element to the <datalist>. 
      dataList.appendChild(option); 
      }); 

      // Update the placeholder text. 
      input.placeholder = "e.g. datalist"; 
     } else { 
      // An error occured :(
      input.placeholder = "Couldn't load datalist options :("; 
     } 
     } 
    }; 

    // Update the placeholder text. 
    input.placeholder = "Loading options..."; 

    // Set up and make the request. 
    request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true); 
    request.send(); 
</script>

我得到這個在文章codepen鏈接。由Matt West創建的筆。

來源

2016-01-24 15:40:52 kjugi

類似數據列表

回答

相關問題