需要對jQuery autosuggest插件進行調整

我一直在尋找適合我所有需求的jquery autosuggest插件。需要對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);

來源

2012-02-21 jamjam

更改此：

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

來源

2012-02-21 16:02:49 Blender

嘿嘿，謝謝您的回答，但恐怕沒有奏效。它會像以前一樣執行相同的操作，即填充搜索框。 – jamjam 2012-02-21 16:10:04

需要對jQuery autosuggest插件進行調整

回答

相關問題