2012-05-11 47 views
1

我在搜索框上使用了自動填充功能。一切工作正常,除了鼠標點擊事件不起作用,如果您使用鼠標來選擇建議,而不是使用向上或向下箭頭。在極少數情況下,當頁面首次加載時,它將工作一次,但不會再次。不知道我做錯了什麼。鼠標點擊事件不適用於自動填充建議

測試頁位於http://www.candyundies.com/template_non_product.php

這裏是autocomplete.js的內容:

// global variables 
var acListTotal = 0; 
var acListCurrent = -1; 
var acDelay  = 100; 
var acURL   = null; 
var acSearchId = null; 
var acResultsId = null; 
var acSearchField = null; 
var acResultsDiv = null; 
function setAutoComplete(field_id, results_id, get_url) { 
// initialize vars 
acSearchId = "#" + field_id; 
acResultsId = "#" + results_id; 
acURL  = get_url; 
// create the results div 
$("#auto").append('<div id="' + results_id + '"></div>'); 
// register mostly used vars 
acSearchField = $(acSearchId); 
acResultsDiv = $(acResultsId); 
// on blur listener 
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 100) }); 
// on key up listener 
acSearchField.keyup(function (e) { 
    // get keyCode (window.event is for IE) 
    var keyCode = e.keyCode || window.event.keyCode; 
    var lastVal = acSearchField.val(); 
    // check an treat up and down arrows 
    if(updownArrow(keyCode)){ 
     return; 
    } 
    // check for an ENTER or ESC 
    if(keyCode == 13 || keyCode == 27){ 
     clearAutoComplete(); 
     return; 
    } 
    // if is text, call with delay 
    setTimeout(function() {autoComplete(lastVal)}, acDelay); 
}); 
} 
// treat the auto-complete action (delayed function) 
function autoComplete(lastValue) { 
// get the field value 
var part = acSearchField.val(); 
// if it's empty clear the resuts box and return 
if(part == ''){ 
    clearAutoComplete(); 
    return; 
} 
// if it's equal the value from the time of the call, allow 
if(lastValue != part){ 
    return; 
} 
// get remote data as JSON 
$.getJSON(acURL + part, function(json){ 
    // get the total of results 
    var ansLength = acListTotal = json.length; 
    // if there are results populate the results div 
    if(ansLength > 0){ 
     var newData = ''; 
     // create a div for each result 
     for(i=0; i < ansLength; i++) { 
      newData += '<div class="unselected">' + json[i] + '</div>'; 
     } 
     // update the results div 
     acResultsDiv.html(newData); 
     acResultsDiv.css("display","block"); 
     // for all divs in results 
     var divs = $(acResultsId + " > div"); 
     // on mouse over clean previous selected and set a new one 
     divs.mouseover(function() { 
      divs.each(function(){ this.className = "unselected"; }); 
      this.className = "selected"; 
     }); 
     // on click copy the result text to the search field and hide 
     divs.click(function() { 
      acSearchField.val(this.childNodes[0].nodeValue); 
      clearAutoComplete(); 
     }); 
    } else { 
     clearAutoComplete(); 
    } 
}); 
} 
// clear auto complete box 
function clearAutoComplete() { 
acResultsDiv.html(''); 
acResultsDiv.css("display","none"); 
} 
// treat up and down key strokes defining the next selected element 
function updownArrow(keyCode) { 
if(keyCode == 40 || keyCode == 38){ 
    if(keyCode == 38){ // keyUp 
     if(acListCurrent == 0 || acListCurrent == -1){ 
      acListCurrent = acListTotal-1; 
     }else{ 
      acListCurrent--; 
     } 
    } else { // keyDown 
     if(acListCurrent == acListTotal-1){ 
      acListCurrent = 0; 
     }else { 
      acListCurrent++; 
     } 
    } 
    // loop through each result div applying the correct style 
    acResultsDiv.children().each(function(i){ 
     if(i == acListCurrent){ 
      acSearchField.val(this.childNodes[0].nodeValue); 
      this.className = "selected"; 
     } else { 
      this.className = "unselected"; 
     } 
    }); 
    return true; 
} else { 
    // reset 
    acListCurrent = -1; 
    return false; 
} 
} 
+2

請創建的jsfiddle一個例子。我沒有觸及candiesundies.com。 :P – j08691

+0

@ j08691從未使用過它之前,所以不知道這是正確的:jsfiddle.net/y3SPK – Rodney

回答

1

不div的數組?

你不能覆蓋數組的UI事件,它不存在。除非我在這裏語法錯誤。

嘗試迭代,並添加事件

for(var i 0; i < divs.length;i++) 
     divs[i].onclick = ... 
+0

我認爲這個問題是在這樣的:\t \t \t divs.click(函數(){ \t \t \t \t acSearchField.val (this.childNodes [0] .nodeValue); \t \t \t \t clearAutoComplete(); \t \t \t});使用創建 – Rodney

+0

的div:用於\t \t \t(I = 0;我'; \t \t \t}如果我可以添加一些這個點擊? – Rodney

+0

您可以在創建過程中輕鬆添加onclick屬性。在參數中傳遞Id,確保在方法參數tho中添加引號。 onclick =「someClickFunction('」+ someDivId +「')」 – FlavorScape