1

デフォルトでは、jQuery Uオートコンプリートは結果のリストを生成し、結果をクリックすると、クリックされた結果テキストがテキストフィールドに入力されます。

結果をクリックするとその結果のページに移動するように、この動作を変更したいと思います。ハイパーリンクを生成するために、結果の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イベントにフックして、独自の関数を提供する必要があると考えてください。

詳細については、こちらをご覧ください。

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

これにより、各<a>要素にhref="[itemvalue]"が追加されます。

編集：以下のコードを使用すると、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 に答える