强制用户选择JQuery UI自动完成并在选择后填充隐藏字段

我有一个大的HTML表单，其中包含许多需要帐户自动完成的字段。我标记这些领域与类AccountLookup和jQuery不会为自动完成肮脏的工作：强制用户选择JQuery UI自动完成并在选择后填充隐藏字段

$(".AccountLookup").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "Lookup.asmx/GetAccounts", 
      data: "{ 'Search': '" + request.term + "' }", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataFilter: function (data) { return data; }, 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         value: item.Value 
        } 
       })) 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus); 
      } 
     }); 
    }, 
    minLength: 3 
});

现在，当用户选择从自动完成我需要它来填充隐藏字段只是前的标签输入字段的东西;可能使用类似的东西：

$(this).prev().val(item.Key);

如何合并此功能？另外，我如何强制用户从自动完成中选择？（所有值是预先定义的，用户不能添加新的）。

编辑： 据我了解，从检查DOM，选择选项中隐藏的表单字段当前正在填充。

select: function (event, ui) { 
    $(this).prev().val(ui.item.key); 
}

来源

2010-12-21 mhenry

我看不到它的工作... – think123 2012-08-10 21:39:30

$(".AccountLookup").autocomplete({ 
    /*...*/ 
}).result(function(event, item) { 
    $(this).prev().val(item.Key); 
});

你也可以使用一个jQuery validate，以确保字段被填充。

来源

2010-12-21 17:47:43

对于选择操作，请尝试使用formatItem选项。您可以格式化每个结果以具有将填充另一个文本框的onclick事件。

要强制选择自动完成，您需要使用mustMatch选项。

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

来源

2010-12-21 17:45:06 zsalzbank

我试过使用mustMatch选项，但它似乎并没有工作。我仍然可以输入未由服务器定义的值并提交表单。 – mhenry 2010-12-21 17:56:24

jQuery * UI *自动完成没有“mustMatch”选项。我正在使用与您正在讨论的完全不同的插件。 – mhenry 2010-12-23 19:15:28

我知道这是旧的文章---但我遇到了它在试图解决一个类似的问题（强制用户选择列表中的项目）...

 $("#ac").autocomplete({ 
      source: function (req, resp) { 
        //add code here... 
      }, 
      select: function (e, ui) { 
       $(this).next().val(ui.item.id); 
      }, 
      change: function (ev, ui) { 
       if (!ui.item) 
        $(this).val(""); 
      } 
     });

来源

2012-09-27 14:55:09

的力量选择，你可以使用自动完成

 var availableTags = [ 
      "ActionScript", 
      "AppleScript" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags, 
      change: function (event, ui) { 
       if(!ui.item){ 
        //http://api.jqueryui.com/autocomplete/#event-change - 
        // The item selected from the menu, if any. Otherwise the property is null 
        //so clear the item for force selection 
        $("#tags").val(""); 
       } 

      } 

     });

来源

2012-12-17 15:33:36 Saurabh

我很长一段时间以前就遇到了这个同样的问题"change" event和一些后帮我与它一起。自从我发现有些情况下我希望从返回的信息中填入一个或多个字段，我就修改了代码。在自动完成的选择选项中，我添加了一个函数。

select: function (e, ui) {ReSetField({'txtID':'id','txtPrice':'price' [,etc...]}, ui) }

函数“ResetFields”然后采取与字段名配对的元素名称的列表JSON并使用字段名以匹配元件在UI对象。该值可以从ui项中拉出并放入html元素中。

function ReSetField(_flds, _vals) { 
    //Set up the flds to be reset with values passed in. 
    try { 
    if (_flds != undefined) { 
     if ($.type(_flds) == 'string') { 
     _flds = JSON.parse(_flds); 
     }; 
     var _fld = null; 
     var _val = ''; 
     $.each(_flds, function (index) { 
     if (index.length > 0) { 
      _fld = '#' + index; //Set the forms field name to set 
      _val = _flds[index]; //Pick up the field name to set the fields value 
      $fld = $(_fld); 
      $fld.val(_vals.item[_val]); //Set the fields value to the returned value    
      } 
     } 
     }) 
    }; 
    } 
    catch (e) { 
    alert('Cannot set field ' + _fld + '.'); 
    } 
}

通过坚持了“字段列表”到HTML元素作为像“字段列表”的属性，并使用像“组合框”一类，那么我可以使用单个函数来查找所有组合框元件并在窗体上设置自动完成，从而减少处理表单上的2个或更多查找所需的代码量。

来源

2015-01-28 19:46:25

强制用户选择JQuery UI自动完成并在选择后填充隐藏字段

回答

相关问题