автозаполнение электронной почты не работает

Я создаю автоматическое полное поле электронной почты, используя jQuery UI.
форма работает нормально, но у меня есть 2 проблемы:автозаполнение электронной почты не работает

Первые один

Письма держать добавление рядом друг с другом и строить за пределами вмещающего div, как это:

screen view

КОД

<style type="text/css"> 

    #emailDiv 
    { 
     width: 300px; 
     padding: 3px 3px 0; 
     margin: 0 auto; 
     border: 1px solid #aaa; 
     background-color: #fff; 
     cursor: text; 
     position: absolute; 
     float: left; 
    } 
    #email 
    { 
     border : none 
    } 
    #emailDiv span 
    { 
     border:solid 1px black 

     } 

</style> 
<script type="text/javascript"> 
    $(function() { 
     $("#emailDiv").click(function() { $("#email").focus(); }) 
     $("#email").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "AutoComplete.asmx/GetEmails", 
        data: "{ 'mail': '" + request.term + "' }", 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataFilter: function(data) { return data; }, 
        success: function(data) { 
         response($.map(data.d, function(item) { 
          return { 
           value: item.Emails 
          } 
         })) 
        }, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
        } 
       }); 
      }, 
      select: function(e, ui) { 
       var list = ui.item.value; 
       var span = $("<span>").text(list); 
       span.insertBefore("#email"); 


      }, 

      change: function() { 
       $("#email").val(""); 


      } 
     }); 
    }); 

</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<label>Email: </label> 
<div id="emailDiv"> 
    <input type="text" id="email" /> 
</div> 
</div> 
</form> 
</body> 
</html>

Второй

Я не могу установить текстовое поле электронной почты, чтобы быть пустым после того, как изменить я должен нажать где-то за пределами emailDiv, чтобы сделать его пустым.

источник

2012-05-29 Mina Gabriel

Если я вас понимаю проблема correcty:

Для вашей первой задачи

Это зависит от типа документа, а остальное из глобальных деклараций сброса CSS, но в этом примере, он фиксирует ваш выпуск:

См. этот working Fiddle пример!

CSS

#emailDiv { 
    width: 300px; 
    padding: 3px 3px 0; 
    margin: 0 auto; 
    border: 1px solid #aaa; 
    background-color: #fff; 
    cursor: text; 
    position: absolute; 
    float: left; 
} 
#email { 
    border: 0 none; 
} 
#emailDiv span { 
    border: 1px solid black; 
    float: left; 
    padding: 2px; 
    margin: 2px; 
} 
.clear { 
    clear:both!important; 
}

HTML моделируемой

<form id="form1" runat="server"> 
    <div> 
     <label>Email: </label> 
     <div id="emailDiv" class="clear"> 
      <span>[email protected]</span> 
      <span>[email protected]</span> 
      <span>[email protected]</span> 
      <span>[email protected]</span> 
      <span>[email protected]</span> 
      <input type="text" id="email" /> 
     </div> 
    </div> 
</form>

К вашему второму вопросу

Добавить $(this).val(''); return false; в конце вашей функции выбора, это предотвратит обновление значения.

См. Это Working Fiddle Пример!

$(function() { 
    $("#emailDiv").click(function() { 
    $("#email").focus(); 
    }); 

    $("#email").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "AutoComplete.asmx/GetEmails", 
     data: "{ 'mail': '" + request.term + "' }", 
     dataType: "json", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataFilter: function(data) { return data; }, 
     success: function(data) { 
      response($.map(data.d, function(item) { 
      return { 
       value: item.Emails 
      } 
      })); 
     }, 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
     }); 
    }, 
    select: function(e, ui) { 
     var list = ui.item.value; 
     var span = $("<span>").text(list); 
     span.insertBefore("#email"); 

     // clear the input 
     $(this).val(''); return false; 
    } 
    }); 
});

кажется, что на исходном коде, они проверяют ложь!

источник

2012-05-29 17:07:33 Zuul

для моей первой проблемы спасибо, что это отлично работает, для другого я уже пробовал это, и он не работал –

@MinaGabriel, попробуйте переместить '$ (" # email "). Val (" ");' к реакции успеха! Я считаю, что после успешного ответа вам больше не нужно вводить введенное значение ... – Zuul

@MinaGabriel, я обновил ответ на вторую проблему! – Zuul

автозаполнение электронной почты не работает

ответ

Смежные вопросы