Question

默认情况下，jQuery U Autocomplete会生成结果列表，点击结果后，它会使用点击的结果文本填充文本字段。

我想更改此行为，以便在点击结果时会转到该结果的页面。为了生成超链接，我可以传入结果的ID。

我正在使用PHP JSON来恢复结果集：

$return_arr = array();

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['value'] = $row['name'];

    array_push($return_arr, $row_array);
}

echo json_encode($return_arr);

这是我目前的jQuery：

$(function() {
$("#searchcompany").autocomplete( {
    source: "companies.php",
    minLength: 2
});
});

Answer 1

认为您需要挂钩到select事件并提供自己的功能。

有关详细信息，请参阅here。

提供一个回调函数来处理select事件作为init选项。

$("#searchcompany").autocomplete( {
  source: "companies.php",
  minLength: 2,
  select: function(event,ui) { //Do your code here...
                               event.preventDefault();  
                             }
});

或按类型绑定到select事件：autocompleteselect。

    $( "#searchcompany" ).bind( "autocompleteselect", function(event, ui) {
      ...
    });

并更改匹配项以包含可以单击的超链接使用Open事件： -

open: function(event, ui) { $( 'li.ui-menu-item a').each( function() { 
                                                    var el = $(this); 
                                                    el.attr('href', el.html()); 
                                                    }  
                                                    ); }

这将为每个＆lt; a＆gt;添加href =“[item value]”。元件。

修改：以下代码允许您使用open事件更改项目以包含href，以便它们在窗口中显示链接，单击时它们将带您到指定位置： -

open: function(event, ui) { 
      $("ul.ui-autocomplete").unbind("click");

      var data = $(this).data("autocomplete");          

      for(var i=0; i<=data.options.source.length-1;i++)
      {
        var s = data.options.source[i];
        $("li.ui-menu-item a:contains(" + s.value + ")").attr("href", "directory/listing/" + s.id);
      }

    }

使用此功能也意味着您无需使用select事件。

jQuery UI自动完成 - 超链接结果

1 个答案: