jquery autocomplete add class name list

fafcakar  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(116)

我试着给每个找到的变量添加一个类。正如你所看到的,在标签中,变量'airport name'将有一个类,'country'将有另一个类。然后,我可以使用CSS。
有什么建议吗?

<script>
$.ajax({
  url: "airportinfoWeb.xml",
  type: "GET",
  dataType: "xml",
  success: function (xmlResponse) {
    var data = $("Airport", xmlResponse).map(function () {
      return {
        label: $.trim($("AirportName", this).text()) + ", " + $("Country", this).text(),
        AirportCode: $.trim($("AirportCode", this).text()),
        AirportName: $.trim($("AirportName", this).text()),
        Country: $.trim($("Country", this).text())
      };
    }).get();

    $("#id_AirportCode").autocomplete({
      source: function (req, response) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp("^" + re, "i");
        response($.grep(data, function (item) {
          return matcher.test(item.AirportCode) || matcher.test(item.AirportName) || matcher.test(item.Country);
        }));
      },
      position: {
        my: "left+0 top+4"
      }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
      // Create a custom item display
      var $li = $("<li></li>")
        .append("<div>" + item.label + "</div>")
        .appendTo(ul);
      return $li;
    };
  }
});
</script>
fiei3ece

fiei3ece1#

如果你想在标签的每个部分添加特定的类(例如,'Airport Name'和'Country'),你可以修改_renderItem函数。具体来说,您可以将每个变量 Package 在其自己的HTML元素中,并为其分配一个类。
试试这个:

_renderItem: function (ul, item) {
  // Create an element to hold the complete label, composed of different parts
  const completeLabel = $("<div></div>")
  
  // Extract airport name and country from the label
  const airportName = $("<span></span>").addClass('airport-name').text(item.AirportName)
  const country = $("<span></span>").addClass('country').text(item.Country)
  
  // Combine them into the complete label
  completeLabel.append(airportName).append(", ").append(country)
  
  return $("<li></li>")
    .data("value", item)
    .append($("<a></a>").append(completeLabel)) // Add the complete label inside the <a> tag
    .appendTo(ul)
}

相关问题