📌  相关文章
📜  如何使用 jQuery Mobile 自动完成插件？

📅  最后修改于: 2021-08-30 12:47:14             🧑  作者: Mango

在本文中，我们将了解AutoComplete jQuery Mobile 插件，该插件可帮助移动或 Web 开发人员在其项目中添加自动完成搜索框。

请从以下链接下载所需的预编译文件并将其保存在您的工作文件夹中以供实施。请注意正确的文件路径，同时包含在您的源代码中。

示例 1：以下示例演示了使用上述插件针对国家列表的自动完成搜索功能。

HTML



      
    
    
    
        
    
    
  
    
        
        
    
        
         
    
    

  

    

  
        

          
jQuery Mobile Autocomplete
            
        

  
        

            
Local Simple Data

              


            In this example autoComplete uses a local array of strings.

  
                         


            The list contains strings with'Afganistan', 'Albania', 'Angola',
                'Argentina',
                     'Madagascar', 'Malaysia',
               'Bahrain', 'Bangladesh', 'Belarus',    'Belgium',    
               'Maldives', 'Mali', 'Mauritius', 'Mexico',
                 'Namibia', 'Nepal', 'Niger', 'Norway', 'Burundi', 'Oman',
               'Canada', 'Cameroon', 'Burma', 'Pakistan', 'Panama', 'China', 
               'Peru', 'Croatia']                
            

  
              


            
            
    
            

            

  
        

    

  
    
  

html



   
Result page 

    
        
        

              


            I'm the result page for Country 
                       autocomplete search.
            

  
        

    

html


    
    
    
    
  
    
    
  
    
    
    
    

  

    

  
        

          
jQuery Mobile Autocomplete
            
        

  
        

           
Callback Function

          


          The autoComplete uses a local array of objects. 
          The function selects the new "data-autocomplete" 
          property on each anchor tag in the selected list.
        

  
          


        
        
    
        
    
  
        
    
    
    
  
    
  

    “resultArray.html”文件：下面演示了上面代码中使用的“resultArray.html”文件的代码，它是上面HTML代码的javascript部分使用的链接文件。

    html 

    


   
    Result page 
    
    
            
        
    
              

    
            I'm the result page for Country 
                       autocomplete search.
            
    
  
        
    
    

    输出：

    • 搜索前：

    • 搜索后：

    示例 2：以下示例演示了对由国家/地区名称组成的列表以“值”和“标签”形式的对象的自动完成搜索。

    html 

    

    
    
    
    
  
    
    
  
    
    
    
    

  

    
    
  
        
    
          
    jQuery Mobile Autocomplete
                
        
    
  
        
    
           
    Callback Function
    
          

    
          The autoComplete uses a local array of objects. 
          The function selects the new "data-autocomplete" 
          property on each anchor tag in the selected list.
        
    
  
          

    
        
        
      
        
      
  
        
      
    
      
  
    
  

      注意： JavaScript 部分中使用的“resultArray.html”文件的代码与第一个示例中使用的相同。

      输出：