Question

我已在表单中实现了JQuery UI自动完成窗口小部件，因此当用户从自动填充中选择一个项目时，会使用用户友好文本的id和文本框填充隐藏字段。

我还实现了远程验证，因此如果用户在从列表中选择项目（已设置隐藏字段）后决定删除或更改文本，则会失败并强制用户再次选择项目。

我确实希望允许用户删除该字段，因此如果删除了文本框的所有内容，我想重置隐藏字段，但我不知道如何执行此操作...

提前致谢。

Answer 1

通常，您可以在输入字段上捕获某些事件，即自动完成窗口小部件。主要的是blur输入字段失去焦点，或者keyup有人在输入字段内输入（可能是尝试提交表单）。

以下示例显示了＆＃34;隐藏＆＃34;可以在以下两种情况下更新字段：

＆＃13;

$(function() {
   var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
 
    $( "#tags" )
      // don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          $("#hiddenField").val(terms.join( ", "));
          return false;
        }
      });
});
$("#tags").blur(function() {
   $("#hiddenField").val(this.value);
});
$("#tags").keyup(function (e) {
    if (e.keyCode == 13) {
        $("#hiddenField").val(this.value);
    }
});

＆＃13;

.hiddenFields {
  margin-bottom: 30px; 
}
.hiddenF {
  color: gray;
}  
.hiddenI {
  color: gray;
  border: 1px dotted gray;
  opacity: 50%;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="hiddenFields">
  <label for="hiddenField" class="hiddenF">Hidden Field: </label>
  <input id="hiddenField" class="hiddenI" size="50" readonly/>
</div>
<div class="ui-widget">
  <label for="tags">Tag programming languages: </label>
  <input id="tags" size="50">
</div>

＆＃13;

JQuery UI自动完成和隐藏字段

1 个答案: