JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mypage"><input name="client"/></div>

CSS

.ui-menu .ui-menu-item a.link {
    color: blue;
    text-decoration: underline;
    display: inline;
}
.ui-menu .ui-menu-item div {
  text-decoration: none;
  display: block;
  padding: 2px .4em;
  line-height: 1.5;
  zoom: 1;
  font-weight: normal;
}
.ui-menu .ui-menu-item div:hover {
    background-color:#eff;
}

JavaScript

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

var ac = $("#mypage input[name='client']").autocomplete({
    minLength: 1,
    appendTo: document.body,
    source: availableTags,
    focus: function (event, ui) {
        event.preventDefault();
    },
}).data("ui-autocomplete");
ac._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
    .append("<div>"+item.label+"<a class='link' href='http://test'>(http://test)</a></div>")
        .appendTo(ul);
};
var ms = $._data(ac.menu.element.get(0), 'events').menuselect[0].handler;
ac.menu.element.off("menuselect");
ac.menu.element.on("menuselect", function (ev) {
    if($(ev.originalEvent.target).hasClass("link"))
        return;
    ms.apply(this,arguments);
});