1

默认情况下，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
});
});
4

1 回答 1

1

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

请参阅此处了解更多信息。

提供一个回调函数来处理选择事件作为一个初始化选项。

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

或按类型绑定到选择事件：自动完成选择。

    $( "#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()); 
                                                    }  
                                                    ); }

这将为每个 <a> 元素添加一个 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 事件。

于 2010-07-08T11:31:08.053 回答