Question

我一直在寻找适合我所有需求的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);

Answer 1

改变这个：

$('#'+id).parent('div.' + config.className).find('.ausu-suggestionsBox > ul').html(data);

对此：

$('#'+id).parent('div.' + config.className).find('.ausu-suggestionsBox > ul').html('<a href="#">' + data + '</a>');

需要调整jQuery autosuggest插件

1 个答案: