當放開鍵時刪除JQuery keydown事件更改

我正在嘗試創建一個自動提示框。當用戶開始在#tagSelection輸入字段中輸入內容時，JQuery通過Ajax從數據庫中獲取建議，並將這些建議顯示在右側#tagSelection字段下顯示的#suggestBox div中。當放開鍵時刪除JQuery keydown事件更改

現在我想讓用戶使用向下箭頭鍵選擇其中一個建議。我已經開始通過處理keydown（）事件並在此事件期間爲第一個條目分配一個類來構建它。我面臨的問題是，當我放開箭頭鍵時，班級會再次被移除。當我放開鑰匙時，我需要保留它。那可能嗎？

的HTML

<div class="form-entry"> 
    <input id="tagSelection" name="tags" type="text" value="" size="40"> 

    <div id="suggestBox" style=""> 
     <a href="#" id="1">design</a> 
     <a href="#" id="3">debit card</a> 
     <a href="#" id="4">deer</a> 
    &nbsp; 
    <a href="#" id="addTag">Add word</a> 

    <div id="selectedTags"></div> 

</div>

jQuery的

(function() { 
    $('#tagSelection').keydown(downArrowKeyHandler); 
})(); 

function downArrowKeyHandler(event) { 
    if (event.keyCode == 40) { 
     if ($('#suggestBox').length > 0) { 
      if ($('[tagSelected = 1]').length == 0) { 
       // the tagSelected class gives the entry a colored background 
       $('#suggestBox').children().filter(':first').addClass('tagSelected'); 
      } 
     } 
    } 
}

來源

2012-12-25 Julius

40是向下鍵ASCII碼？ –

什麼是''[tagSelected = 1]'？你的意思是「.tagSelected」嗎？（或者也許你正在使用一種我不知道的技術。）上面的代碼看起來並不像它可能刪除類;在別處檢查其他事件處理鉤子。 –

我發現這裏完全一樣的問題：

How to make a permanent change to an element after using jQuery's .keydown()?

看來我確實有一些其他的JQuery代碼干擾了我的事件處理程序。每當有人在#tagSelection字段中釋放一個鍵時，就會觸發一個JQuery方法，從數據庫中檢索建議。已經存在的keyup（）事件干擾了我的新的keydown（）事件。

(function() { 
    $('#tagSelection').keyup(tagboxTypingHandler) 
})(); 


function tagboxTypingHandler(event) { 
    if (event.keyCode != 40) { 
     var substring = $('#tagSelection').val(); 
     if (substring.length > 1) { 
      $.get("http://localhost:8080/tag/search/" + substring, returnedTagsHandler); 
     } 
    } 
}

我剛添加的event.keyCode！= 40的條件和現在的類留在建議和它的作品:-)

來源

2012-12-25 13:45:21 Julius

如果我給你改正的，jQuery的自動完成功能是足夠在這種情況下。試試這個DEMO

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input class="ui-widget ui-widget-content ui-corner-all" id="tags"> 
</div> 

$("#tags").autocomplete({ 
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ], 
    delay: 0 
});

來源

2012-12-25 13:35:03

我更願意回答這個問題。我需要太多的自定義行爲來與第三方插件，我想自己學習這些東西。 – Julius

自動完成只是一個jQuery的東西。你已經在使用。 –

JS代碼：

$("input").keypress(function() { 
var s = $(this).val(); 
$.ajax({ 
other params 
success: function(data) { // here data contains all the suggest echoed with comma seprated (see below) 
var s = data.split(","); 
$(this).autocomplete({ 
    source: s, 
    delay: 0 
}); 
}); 
});

在PHP中應呼應這樣

siren,sam,sami,salman

來源

2012-12-25 13:45:19

那麼你也會不尊重我？我有同樣的答案？ –

當放開鍵時刪除JQuery keydown事件更改

回答

相關問題