jQuery 自动完成链接

Question

我正在尝试为我的慈善机构内部网站创建一个搜索功能，以帮助员工找到他们需要的应用程序和资源。到目前为止我已经知道了，但我一辈子都无法将结果 link 送到我需要的地方。

到目前为止，这是我的代码，包含测试条目 Wikipedia 和 Google。

如有任何提示，我们将不胜感激！

$(function () {
  $("#search")
    .autocomplete({
      //"autocomplete.php",
      source: [
        {
          id: "Wikipedia",
          value: "Wikipedia",
          label: "Wikipedia",
          img:
            "https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png",
        },

        {
          id: "Google",
          value: "Google",
          label: "Google",
          img:
            "https://www.buro210.nl/wp-content/uploads/2017/05/google-logo-icon-PNG-Transparent-Background-e1495781274381.png",
        },
      ],
      minLength: 1,
      select: function (event, ui) {
        /*
          var url = ui.item.id;
          if(url != '') {
            location.href = '...' + url;
          }
          */
      },
      html: true,
      open: function (event, ui) {
        $(".ui-autocomplete").css("z-index", 1000);
      },
    })
    .autocomplete("instance")._renderItem = function (ul, item) {
    return $(
      "<li><div><img src='" +
        item.img +
        "'><span>" +
        item.value +
        "</span></a></div></li>"
    ).appendTo(ul);
  };
});

.center {
  margin: auto;
  width: 45%;
  border: 0px solid #73AD21;
  padding: 10px;
  text-align: center;
}

#search{
 text-align: left;
 padding-right: 10px;
 padding-left: 10px;
 border: 1px solid #c2c2d6;
 width:100%;
 max-width: 400px;
  border-radius: 5px;
  height:25px;
 background-color: #e0e0eb;

}

.ui-menu img{
  width:40px;
  height:40px;
  border-radius: 8px;
}
.ui-menu li span{
 display: inline-block;
 font-size:15pt;
  padding:0px 0px 10px 10px;
  margin:0 0 10px 0 !important;
  white-space:nowrap;
 vertical-align: middle;
  border-radius: 30px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="center"><input type="text" id="search" placeholder="What are you looking for?"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png" alt="Search" style="height:38px;vertical-align: middle;"><br></div>

Answer 1

您可以只向数据集添加一个 URI 属性，然后在 select 函数中使用它，这里是一个工作片段：

$(function() {

      $("#search").autocomplete({
        source: //"autocomplete.php",
        [
          {id:"Wikipedia",
           value:"Wikipedia",
           label:"Wikipedia",
           uri: 'https://www.wikipedia.org/',
           img:"https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png"},
          
          {id:"Google",
           value:"Google",
           label:"Google",
           uri: 'https://www.google.com',
           img:"https://www.buro210.nl/wp-content/uploads/2017/05/google-logo-icon-PNG-Transparent-Background-e1495781274381.png"}
        ],
        minLength: 1,
        select: function(event, ui) {
          //console.log(ui.item);
          
          //var url = ui.item.uri;
          //if(url !== '') {
            location.href = ui.item.uri;
          //}
          
        },
        html: true, 
        open: function(event, ui) {
          $(".ui-autocomplete").css("z-index", 1000);

        }
      })
        .autocomplete( "instance" )._renderItem = function( ul, item ) {
        return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></a></div></li>" ).appendTo( ul );
      };

    });

.center {
  margin: auto;
  width: 45%;
  border: 0px solid #73AD21;
  padding: 10px;
  text-align: center;
}

#search{
 text-align: left;
 padding-right: 10px;
 padding-left: 10px;
 border: 1px solid #c2c2d6;
 width:100%;
 max-width: 400px;
  border-radius: 5px;
  height:25px;
 background-color: #e0e0eb;

}

.ui-menu img{
  width:40px;
  height:40px;
  border-radius: 8px;
}
.ui-menu li span{
 display: inline-block;
 font-size:15pt;
  padding:0px 0px 10px 10px;
  margin:0 0 10px 0 !important;
  white-space:nowrap;
 vertical-align: middle;
  border-radius: 30px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="center"><input type="text" id="search" placeholder="What are you looking for?"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png" alt="Search" style="height:38px;vertical-align: middle;"><br></div>

jQuery 自动完成链接

jQuery Autocomplete as Links

javascript

jquery

autocomplete

hyperlink

jquery-ui-autocomplete