时间戳

首页 > 解决方案 > Jquery自动完成：如何防止选择重复

javascript - Jquery自动完成：如何防止选择重复

问题描述

select: function()如果先前选择了特定的 ID ，我想防止重复选择。我想防止roll No我的代码重复如下。

    select: function( event, ui ) { 
            //var item = ui.item.data;                      
        id_arr = $(this).attr('id');
        id = id_arr.split("_");            
        $('#rollNumber_'+id[1]).val(ui.item.data.rollNumber);
        $('#name_'+id[1]).val(ui.item.data.name);  
        $('#class_'+id[1]).val(ui.item.data.class);  
    }

HTML

<div id="students">
  <div id="first">
   <input type="number" id="rollNumber_1" >
   <input type="text" class="name" id="name_1" >
   <input type="text" id="class_1" >
  </div>
  <div id="second">
   <input type="number" id="rollNumber_2" >
   <input type="text" class="name" id="name_2" >
   <input type="text" id="class_2" >
  </div>
 </div>

标签： javascriptjquery

解决方案

防止重复

可以有许多不同的方法，这取决于代码逻辑和情况。从当前的情况和代码中，我看到了两种方法。

  1. 当您设置 $('#rollNumber_'+id[1]) 的值时，您可以验证 Value 是否为空。如果为空则表示用户是第一次选择它。:D
  2. 将选定的 Id 保存在 Array 或 Dom 中。

让我给一个示例演示

方法一

select: function( event, ui ) {                       
    id_arr = $(this).attr('id');
    id = id_arr.split("_");  

    /* Logic goes here */
    var rollNoVal = $('#rollNumber_'+id[1]).val();

    if(rollNoVal != '') {
       console.log('Duplicate selection is not allowed');
       return;
    }
    /* Logic done here */

    $('#rollNumber_'+id[1]).val(ui.item.data.rollNumber);
    $('#name_'+id[1]).val(ui.item.data.name);  
    $('#class_'+id[1]).val(ui.item.data.class);  
}

方法二

  var selectedStudents = [];
  select: function( event, ui ) {                       
    id_arr = $(this).attr('id');
    id = id_arr.split("_");  

    /* Logic goes here */
    var inArrayExists = selectedStudents.indexOf(ui.item.data.rollNumber);
    if(inArrayExists != -1) {
       console.log('Duplicate selection is not allowed');
       return;
    }

    // Push to an array
    selectedStudents.push(ui.item.data.rollNumber);
    /* Logic done here */

    $('#rollNumber_'+id[1]).val(ui.item.data.rollNumber);
    $('#name_'+id[1]).val(ui.item.data.name);  
    $('#class_'+id[1]).val(ui.item.data.class);  
 }

推荐阅读