如何在jquery自动完成中将两行显示为一项答案

【问题标题】：How to show two lines as one item in jquery autocomplete如何在jquery自动完成中将两行显示为一项
【发布时间】：2014-03-07 09:56:27
【问题描述】：

这是我的部分代码

   // 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 的选择也发生了一次。错了。

我想将每个字符串显示为单个项目，并且我想更改每个项目第二行的颜色和字体。如何做到这一点？

【问题讨论】：

向我们展示一个返回的 json 字符串。
简单我返回，返回builder.ToString();像这样

标签： c# jquery asp.net asp.net-mvc autocomplete

【解决方案1】：

此 stackoverflow 链接可能对您有所帮助。这解释了如何通过简单地覆盖默认焦点和选择操作在前端和显示中使用您自己的自定义数据格式。

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>

【讨论】：

【解决方案2】：

尝试使用这样的模板

$("#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);

【讨论】：

它的数据是未定义的。我们需要返回 JSON 数据才能工作吗？我们可以返回一个简单的列表来使其工作
我收到此错误，'autocomplete(...).data(...)' 为空或不是对象