自動完成電子郵件範圍不工作

我正在使用jQuery UI構建一個自動完成的電子郵件字段。
形式工作正常，但我有2個問題：自動完成電子郵件範圍不工作

第一個

的電子郵件不斷增加彼此相鄰並建立包含div這樣外：

代碼

<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，嘗試移動'$（「＃電子郵件」）VAL（「」）;'到成功的迴應！我相信，在成功迴應後，您不再需要存在的輸入值... – Zuul

@MinaGabriel，我已更新第二個問題的答案！ – Zuul

自動完成電子郵件範圍不工作

回答

相關問題