Я давно искал плагин jquery autosuggest, который какое-то время отвечал бы всем моим требованиям.
Я нашел этот http://discussion.oslund.ca/2011/01/a-simple-jquery-ajax-autosuggest-plugin/, и демо-версия http://oslund.ca/demos/ausu/.
Тем не мение.Мне нужно серьезно изменить поведение по умолчанию.
В настоящее время, когда пользователь выбирает элемент с помощью клавиатуры или мыши, плагин заполняет поле поиска этим значением.
Вместо этого я хочу, чтобы элементы имели фактическую ссылку, которая приведет пользователя на эту страницу.
Но я не знаю достаточно о javascript / jquery, чтобы выполнить эту настройку.
Так что, пожалуйста, помогите мне с этим.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Suggest</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<form action="#" method="post">
<div class="ausu-suggest">
<input type="text" size="25" value="" name="countries" id="countries" autocomplete="off" />
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ausu-autosuggest.js"></script>
<script>
$(document).ready(function() {
$.fn.autosugguest({
className: 'ausu-suggest',
methodType: 'POST',
minChars: 1,
rtnIDs: false,
dataFile: 'data.php'
});
});
</script>
</body>
</html>
PHP:
<?php
echo "<li><a href='#'>UK</a></li><li><a href='#'>USA</a></li><li><a href='#'>Mexico</a></li>";
?>
PHP возвращает элементы списка, очевидно, это будетподключен к фактической базе данных, когда она находится в работе.
jQuery Источник:
/*
* AUSU jQuery-Ajax Auto Suggest
* http://www.oslund.ca/
*
* @version
* 1.0.1 (Jan 28 2011)
*
* @copyright
* Copyright (C) 2011 Isaac Oslund
* Dual licensed under the MIT and GPL licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/gpl-license.php
*/
(function($){
$.fn.autosugguest = function(config) {
var defaults = {
className: 'suggest',
methodType: 'POST',
addParams: null,
rtnIDs: false,
dataFile: 'data.php',
minChars: 4,
fadeTime: 100
};
var config = $.extend(defaults, config);
config.addParams = (config.addParams != '') ? '&' + config.addParams : '';
$('<div class="ausu-suggestionsBox"><img src="images/arrow.png" /><ul></ul></div>').appendTo('.' + config.className);
$(".ausu-suggestionsBox > ul li").live('mouseover', function()
{
var sel = $(this).parent().find("li[class='selected']").removeClass('selected');
$(this).addClass('selected');
});
$("." + config.className + " > input").keyup(function(event)
{
var fieldParent = $(this).parents('div.' + config.className);
if (event.which != 39 && event.which != 37 && event.which != 38 && event.which != 40 && event.which != 13 && event.which != 9 ) {
fieldVal = fieldParent.find('input:eq(0)').val();
suggest(fieldVal,this.id);
} else {
var fieldChild = fieldParent.find('.ausu-suggestionsBox > ul');
switch (event.which)
{
case 40: { keyEvent(fieldChild,'next');break; }
case 38: { keyEvent(fieldChild,'prev');break; }
case 13:
{
fieldParent.children('input:eq(0)').val($("li[class='selected'] a").text());
if (config.rtnIDs==true) fieldParent.children('input:eq(1)').val($("li[class='selected']").attr("id"));
fieldParent.children('div.ausu-suggestionsBox').hide();
return false;
break;
}
case 9:
{
offFocus(this); $("li").removeClass("selected");
break;
}
}
}
});
$("." + config.className).bind("keypress", function(event) {
if (event.keyCode == 13) return false;
});
$("." + config.className + " > input").live("blur", function(){ offFocus(this); $("li").removeClass("selected"); });
function suggest(dataInput, id)
{
if(dataInput.length < config.minChars) {
$('#'+id).parent('.' + config.className).children('div.ausu-suggestionsBox').fadeOut();
} else {
$('#' + id + ":eq(0)").addClass('ausu-load');
$.ajax({
type: config.methodType,
url: config.dataFile,
dataType: "html",
data: "data=" + dataInput + "&id=" + id + config.addParams,
success: function(data){
if(data.length >0)
{
$('#'+id).parent('div.' + config.className).children('div.ausu-suggestionsBox').fadeIn();
$('#'+id).parent('div.' + config.className).find('.ausu-suggestionsBox > ul').html(data);
$('#'+ id + ":eq(0)").removeClass('ausu-load');
}
else
{
$('#' + id + ":eq(0)").removeClass('ausu-load');
}
}
});
}
}
function keyEvent (fieldChild,action)
{
yx = 0;
fieldChild.find("li").each(function(){
if($(this).attr("class") == "selected")
yx = 1;
});
if(yx == 1)
{
var sel = fieldChild.find("li[class='selected']");
(action=='next') ? sel.next().addClass("selected") : sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
{
(action=='next') ? fieldChild.find("li:first").addClass("selected") : fieldChild.find("li:last").addClass("selected");
}
}
function offFocus(fieldChild)
{
var fieldParent = $(fieldChild).parents('div.' + config.className);
fieldParent.children('div.ausu-suggestionsBox').delay(config.fadeTime).fadeOut();
}
$(".ausu-suggestionsBox > ul li").live("click", function()
{
var fieldParent = $(this).parents('div.' + config.className);
fieldParent.children('input:eq(0)').val($(this).text());
if (config.rtnIDs==true) fieldParent.children('input:eq(1)').val($(this).attr("id"));
fieldParent.children('div.ausu-suggestionsBox').hide();
});
};
})(jQuery);