对于jquery的autocomplete中调用callback函数官方例子的解释

程序员文章站 2022-06-07 16:30:35

...

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({

  /**
      自动补齐组件的执行流程是当输入框内容发生变化时，调用source指定的匿名函数function( request, response )
      这个匿名函数的参数 request, response 是由jquery自动填入的，函数的内容由我们来定义，明显的这是一个callback函数
      1.其中用request.term可以取到jquery自动从文本框取来的输入的内容，
      2.而调用response(jsondata)可以将json数组返回到前端页面的下拉菜单中，也就是自动补齐的最终目的。
      注意：第1项参数好理解，但第2项参数一开始搞不懂容易混淆，总认为response()是callback函数，这里需要定义response()，
            实际上response()不需要我们定义，只需要引用它，把要返回给下拉菜单的字符串作为参数传进去即可。
  */

  source: function( request, response ) { // function( request, response )函数是整个autocomplete的callback函数
    
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          /*  创建一个正则表达式，$.ui.autocomplete.escapeRegex方法说是可以将字符串中的特殊字符作为普通字符处理，即如果传入的是"[]"，处理后返回""，其实就是加了转义字符而已  
              第二个参数"i"表示该正则表达式忽略大小写比较 
          */ 
          response( $.grep( tags, function( item ){ //注意：这个function( item )是$.grep的callback，与response无关
              return matcher.test( item );
          }) );
          /*    $.grep方法可以看做是一个过滤数组元素的方法，将数组中不符合条件的元素剔除  
                第一个参数是源数组，第二个参数是一个回调函数，参数是数组的每一项，如果方法返回true，该元素会被加到目的数组中，否则被过滤  
          */
          /*
          可以直接写一个测试的response():

          response(['测试返回值，将出现在下拉菜单中']);
          
          或者：

          var json_str1 = ['测试返回值，将出现在下拉菜单中']

          response([json_str1]);

          */

      }
});
</script>
 
</body>
</html>

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

http://api.jqueryui.com/autocomplete/

      自动补齐组件的执行流程是当输入框内容发生变化时，调用source指定的匿名函数function( request, response )
      这个匿名函数的参数 request, response 是由jquery自动填入的，函数的内容由我们来定义，明显的这是一个callback函数
      1.其中用request.term可以取到jquery自动从文本框取来的输入的内容，
      2.而调用response(jsondata)可以将json数组返回到前端页面的下拉菜单中，也就是自动补齐的最终目的。
      注意：第1项参数好理解，但第2项参数一开始搞不懂容易混淆，总认为response()是callback函数，这里需要自己定义response()，
            实际上response()不需要我们定义，只需要引用它，把要返回给下拉菜单的字符串作为参数传进去即可。