📜  jQuery |自动完成选择事件

📅  最后修改于: 2021-11-24 05:26:04             🧑  作者: Mango

在网络世界中,使用自动完成预先输入是一种非常普遍的做法。例如用户地址字段。为此,jQuery 提供了一个非常常见的 UI 功能。
在搜索特定值的过程中, jQuery UI 自动完成选择功能为用户提供了一些输入区域的字符串建议,有效地节省了时间。
当用户从预填充列表中选择选项之一时,将触发自动完成选择操作。
非常常见的通用示例是全球数百万用户使用的 google 意见箱。此功能的最基本目的是用用户从列表中选择的值替换文本字段的值。它触发多个事件,如焦点、按键事件或用户输入更改,这些事件用于调用不同的函数,返回描述焦点或所选项目的对象。
实现是使用各种方式完成的,例如从数据库表中获取数据以填充用户输入字段的值。它从以用户输入的关键字开头的相关数据库中选择字符串。与动态实现不同,您可以进行静态实现。例如,使用 XML 文件或列表取自变量数组。

select( event, ui )只要选择了弹出列表中的任何选项,就会触发此函数。它包含两个参数,如下所示:

  • event:该参数提及用户触发的事件。
  • ui:此参数提及包含所选项目的名称和值属性的对象。

代码片段:

$( ".selector" ).autocomplete({
    select: function( event, ui ) {}
});

示例 1:



  

    
        jQuery Autocomplete Selection Event
    
      
    
  
    
    

  

    
      
    
  
    

  

输出:

注意:在上面的例子中,源代码实际上定义了用于选择的数据。

示例 2:

 
 
  

    
        jQuery AutoComplete selection
     
  
    
      
    
      
    
      
    

  

    
              
                         
                           Label of City Name:
                     
    
  

输出:

注意:从上面的两个代码示例中,您可以观察到source参数占用了字符串选项列表,例如数组或函数回调的结果。

jQuery 是一个开源 JavaScript 库,它简化了 HTML/CSS 文档之间的交互,它以其“少写,多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。