Question

我有一个类似这样的数据源。

我还有一个如下所示的文本框。

<div class="col-md-3 col-sm-3 col-xs-3">
              <label class="control-label">Product Name</label>
                <input type="text" class="form-control" id="vnfProductName1" />
              </div>

现在，当用户输入首字母缩写词（SDI）或功能名称（Ericsson软件定义）时，那么我该如何显示前四列匹配的建议。

我是jquery新手，请提出一种解决方法。

Answer 1

下面是自动完成的示例代码，但是您需要根据需要进行转换。

<!doctype html>
<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>
  <script>
  $( function() {
    var projects = [
      {
        functiondesignation: "ericson software",
        accrname: "SDI",
        rstate: "R10A",
        productnumber: "FGC 101 2997"
      },
       {
       functiondesignation: "ericson software",
        accrname: "SDI",
        rstate: "R9A",
        productnumber: "FGC 101 2997"
      },
       {
       functiondesignation: "ericson software",
        accrname: "SDI",
        rstate: "R9A",
        productnumber: "FGC 101 2997"
      },
       {
        accrname: "SDN",
        functiondesignation: "ericson software",
        rstate: "R3A",
        productnumber: "FGC 101 3031/6"
      }
    ];
 
    $( "#project" ).autocomplete({
      minLength: 1,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.accrname );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.functiondesignation );
        $( "#project-description" ).html( ui.item.accrname +ui.item.rstate + ui.item.productnumber );
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.accrname +  item.rstate + item.productnumber+ "</div>")
        .appendTo( ul );
    };
  } );
  </script>
</head>
<body>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
 
 
</body>
</html>

我如何根据来自数据源的搜索为文本框提供建议

1 个答案: