jQuery UI自動完成和HTML表單與選擇菜單

Question

我有一個HTML表單，我使用jQuery UI自動完成插件，它運行良好。它允許用戶開始輸入並從預定義活動列表中進行選擇。

我進一步擴展了它，以便它還填充與使用選擇菜單的下一個字段中的活動關聯的匹配「風險類型」。你可以在這裏看到這樣一個例子：

http://jsfiddle.net/fmdataweb/pCZYd/

如果你輸入「足球」，然後選擇其中的一個選項，然後按Tab鍵將插入任一低，中，高入下一場哪裏選擇菜單是。

下面是處理這個JavaScript的：

$(function() { 


     $("#lastYearSelect1") 
      .autocomplete({ 
       source: availableTags }) 
      .blur(setDropDown); 
    }); 

if(!Array.prototype.indexOf) { 
     Array.prototype.indexOf = function(needle) { 
      var i; 
      for(i = 0; i < this.length; i++) { 
       if(this[i] === needle) { 
        return i; 
       } 
      } 
      return -1; 
     }; 
    } 

    var risks = [{ 
    name: 'low', 
    activities: ['10 pin bowling', 'active play', 'activities and games', 'aerobics', 'aquaerobics', 'archery', 'athletics', 'backyard play', 'badminton', 'ball games', 'ball play', 'ballet', 'ballet dancing', 'ballroom dancing', 'beach', 'body surfing', 'bodysurfing', 'boogie boarding', 'bowling', 'bushwalk', 'bushwalking', 'canoeing', 'circuit training', 'contemporary dancing', 'croquet', 'cross country running', 'cross country training', 'dance', 'dance practice', 'dance training', 'dancing', 'dancing lesson', 'discus', 'discus throwing', 'fishing', 'folk dancing', 'frisbee', 'golf', 'golf driving range', 'gym', 'gym - cardio', 'gym - weights and cardio', 'gym - weights/aerobics', 'gym session', 'gym workout', 'gym/weights', 'handball', 'hiking', 'hip hop dancing', 'hip-hop', 'indoor bowling', 'irish dancing', 'javelin', 'jazz', 'jogging', 'kayaking', 'kicking football', 'lawn bowling', 'lifesaving', 'light play ', 'little athletics', 'mini putt putt golf', 'modern dancing', 'nippers', 'pilates', 'ping pong', 'play computer games', 'play wii games', 'play with balls', 'playing', 'playing around', 'playing golf', 'playing pool', 'playing snooker', 'playing with friends', 'playing with toys', 'playstation', 'playstation games', 'pool', 'power walking', 'putt putt golf', 'rowing', 'running', 'scuba diving', 'shot put', 'skipping', 'snooker', 'snorkelling', 'sprinting', 'squad swimming', 'swim training', 'swimming', 'swimming laps', 'swimming lesson', 'swimming training', 'table tennis', 'tai chi', 'tap dancing', 'ten pin bowling', 'throwing', 'throwing javelin', 'throwing shot put', 'tramping', 'treadmill', 'treadmill running', 'walking', 'walking dog', 'weights', 'wii active games', 'wii games', 'wii sport', 'yoga']}, 
    { 
    name: 'moderate', 
    activities: ['20/20 cricket', 'abseiling', 'acrobatic gymnastics', 'acrobatics', 'acrobatics class', 'artistic gymnastics', 'austag', 'backyard cricket', 'baseball', 'basketball', 'basketball practice', 'basketball training', 'beach volleyball', 'bicycle', 'bicycling', 'bike ', 'bike ride', 'bike riding', 'bikeriding', 'BMX', 'BMX bike', 'board surfing', 'boarding', 'chasings', 'cheerleading', 'chopping wood', 'climbing', 'climbing equipment', 'climbing trees', 'continuous cricket', 'cricket', 'cricket training', 'cross country skiing', 'cycling', 'diving', 'european handball', 'fencing', 'field hockey', 'football', 'football training', 'football umpiring', 'futsal', 'gymnastics', 'gymnastics class', 'high jump', 'hockey', 'horseback riding', 'horseriding', 'hurdles', 'indoor cricket', 'indoor soccer', 'jet skiing', 'jumping on trampoline', 'long jump', 'motor bike riding', 'motorbike', 'motorcycling', 'mountain biking', 'netball', 'netball practice', 'netball training', 'outdoor cricket', 'oztag', 'physical culture', 'playground activities', 'playing in playground', 'playing on equipment', 'racquetball', 'rhythmic gymnastics', 'riding bike', 'riding scooter', 'rockclimbing', 'rockclimbing gym', 'rollerblading', 'rollerskating', 'sailboarding', 'sailing', 'scooter', 'scootering', 'skim boarding', 'soccer', 'soccer refereeing', 'soccer training', 'softball', 'softball training', 'squash', 'surf lifesaving', 'surfing', 'T-ball', 'tennis', 'tennis match', 'tennis training', 'tip ', 'tip football', 'touch football', 'track cycling', 'trampoline', 'trampolining', 'triathlon', 'ultimate frisbee', 'volleyball', 'water polo', 'waterskiing', 'waterslide', 'weightlifting', 'white water rafting', 'windsurfing']}, 
    { 
    name: 'high', 
    activities: ['AFL', 'american football', 'aussie rules', 'australian rules football', 'BMX racing', 'boxercise', 'boxing', 'boxing classes', 'gaelic football', 'gridiron', 'ice hockey', 'ice skating', 'ice-skating', 'inline skating', 'judo', 'karate', 'kickboxing', 'kung fu', 'lacrosse', 'martial arts', 'martial arts training', 'mixed martial arts', 'moguls skiing', 'motocross', 'motor cross racing', 'riding rip stick', 'riding skateboard', 'rip stick', 'ripstick', 'rip-stick', 'rodeo', 'rough play', 'rugby', 'rugby football', 'rugby league', 'rugby league training', 'rugby training', 'skate park', 'skateboard', 'ski lessons', 'skiing', 'skiing downhill', 'snowboarding', 'tae kwon do', 'taekwondo', 'TKD', 'toboganning', 'wrestling']}]; 

function setDropDown() { 
    var $this = $(this); 
    var activity = $this.val(); 
    var i; 
    for (i = 0; i < risks .length; i++) { 
     if (risks [i].activities.indexOf(activity) > -1) { 
      var j; 
      var NextddlRisk= $(this).parents("tr").find("[id^='lastYearRisk']")[0]; //find the parent tr, then find the risk dropdown 
      for(j = 0; j < NextddlRisk.options.length; j++){ 
       if (NextddlRisk.options[j].innerHTML == risks [i].name){ 
        NextddlRisk.selectedIndex = j; 
        break; 
       }      
      } 
     break; 
     } 
    } 


}; 

我的問題：是否有可能沒有按TAB鍵要做到這一點，爲此一旦用戶發生已經選擇活動從清單？用戶並不清楚風險在此階段已被預先填充，因爲直到他們離開現場後纔出現風險。

Answer 1

我想我有一個瘋狂的猜測你在找什麼。是不是讓用戶從自動填充中選擇一個選項，然後離開（或按Tab鍵），用實際值填充下拉菜單？如果是這樣的話，您可以訂閱自動完成select事件，並且在您從自動完成下拉列表中選擇一個選項時發生這種情況，請在此處調用您的setDropDown方法。

您的代碼太長，有一些錯誤，但在這裏是一個fiddle

$("#lastYearSelect1") 
     .autocomplete({ 
     source: availableTags, 
     select: function (e, ui) { 

      $(e.target).val(ui.item.value); 
      setDropDown.call($(e.target)); 
     } 
    }) 



cloned.find("[id^=lastYearSelect]") 
      .autocomplete({ 
      source: availableTags, 
       select: function (e, ui) { 

       $(e.target).val(ui.item.value); 
       setDropDown.call($(e.target)); 
      } 
     })