如何顯示兩行一個項目jQuery的自動完成

這裏是我的代碼的一部分如何顯示兩行一個項目jQuery的自動完成

// Auto Complete Handler 
     $("#NameInput").autocomplete("/Data/GetNames", { 
      cacheLength: 25, 
      minChars: 4, 
      delay: 50, 
      scrollHeight: 400, 
      autoFill: true 
     });

眼下，這段代碼帶來了一組從C＃和顯示名稱。比方說，我想追加幾個屬性，如"Hyundai\n, Verna", "Honda\n, Brio", "Maruti\n, Swift"。在這種格式下，我的c＃代碼將數據提供給自動完成，在這裏自動完成將每個字符串呈現爲2個不同的項目。現代和verna也選擇了一次。這是錯誤的。

我要顯示的每個字符串作爲單個項目和我想改變每個項的第二線的顏色&字體。這個怎麼做？

來源

2014-03-07 Naruto

我們展示了一個retunred JSON字符串。 –

只是我返回，返回builder.ToString（）;像這樣 – Naruto

嘗試使用模板這樣

$("#NameInput").autocomplete("/Data/GetNames", { 
    //your params 
}).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
      .appendTo(ul);

來源

2014-03-07 10:59:21

它的數據是不確定的。我們是否需要返回JSON數據才能工作？，我們可以返回一個簡單的列表來使其工作嗎？ – Naruto

我得到這個錯誤，'autocomplete（...）。data（...）'爲null或不是一個對象 – Naruto

這個計算器鏈接可能對你有所幫助。這解釋瞭如何在前端和顯示中使用自己的自定義數據格式，方法是簡單地覆蓋默認焦點並選擇操作。

Check this link

例子：

.autocomplete("instance")._renderItem = function(ul, item) { 
    return $("<li>") 
    .append("<div>" + item.label + "<br>" + item.desc + "</div>") 
    .appendTo(ul); 
};

$(function() { 
 
    var projects = [ 
 
     { 
 
     value: "jquery", 
 
     label: "jQuery", 
 
     desc: "the write less, do more, JavaScript library", 
 
     icon: "jquery_32x32.png" 
 
     }, 
 
     { 
 
     value: "jquery-ui", 
 
     label: "jQuery UI", 
 
     desc: "the official user interface library for jQuery", 
 
     icon: "jqueryui_32x32.png" 
 
     }, 
 
     { 
 
     value: "sizzlejs", 
 
     label: "Sizzle JS", 
 
     desc: "a pure-JavaScript CSS selector engine", 
 
     icon: "sizzlejs_32x32.png" 
 
     } 
 
    ]; 
 
    
 
    $("#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); 
 
     $("#project-description").html(ui.item.desc); 
 
     $("#project-icon").attr("src", "images/" + ui.item.icon); 
 
    
 
     return false; 
 
     } 
 
    }) 
 
    .autocomplete("instance")._renderItem = function(ul, item) { 
 
     return $("<li>") 
 
     .append("<div>" + item.label + "<br>" + item.desc + "</div>") 
 
     .appendTo(ul); 
 
    }; 
 
    });

<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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.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> 
 
    </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=""> 
 
<input id="project"> 
 
<input type="hidden" id="project-id"> 
 
<p id="project-description"></p> 
 
    
 
    
 
</body> 
 
</html>

來源

2016-10-06 12:01:54 Shivakrishna

如何顯示兩行一個項目jQuery的自動完成

回答

相關問題