jQuery UI Autcomplete - результаты гиперссылки - PullRequest
Новая
       6

jQuery UI Autcomplete - результаты гиперссылки

1 голос
/ 08 июля 2010

По умолчанию автозаполнение jQuery U создает список результатов, при щелчке по результату оно заполняет текстовое поле текстом результата щелчка.

Я хотел бы изменить это поведение, чтобы при нажатиив результате вы попадете на страницу этого результата.Чтобы сгенерировать гиперссылку, я могу передать идентификатор результата.

Я использую 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
});
});

1 Ответ

1 голос
/ 08 июля 2010

Думаю, вам нужно подключиться к событию 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()); 
                                                    }  
                                                    ); }

Это добавит 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.

...