javascript - 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));
            }
        })