当前位置： 文江博客话题详情

需要调整 jQuery 自动建议插件

发布于 2025-01-07 12:17:44 字数 7323 浏览 0 评论 0原文

一段时间以来，我一直在寻找满足我所有要求的 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);
原文

I have been looking for jquery autosuggest plugin that fit all my requirements for a while.

I have found this one http://discussion.oslund.ca/2011/01/a-simple-jquery-ajax-autosuggest-plugin/ and the demo is http://oslund.ca/demos/ausu/.

However. I need to make a major adjustment to its default behaviour.

Currently when the user selects an item via keyboard or mouse the plugin populates the search box with that value.

Instead of this I want the items to have an actual link that will take the user to that page.

But I don’t know enough about javascript/jquery to make this adjust.

So please help me with this.

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>";

?>

The php returns list items, obviously it will be connected to an actual database when its in production.

jQuery Source:

/*
* 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);

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

晨与橙与城 2025-01-14 12:17:44

改变这个：

$('#'+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>');

Change this:

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

To this:

$('#'+id).parent('div.' + config.className).find('.ausu-suggestionsBox > ul').html('<a href="#">' + data + '</a>');
回复 原文
~没有更多了~

关于作者

画中仙

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文