แนบรหัสตัวอย่างการเติมอัตโนมัติแบบเลื่อนลงอัตโนมัติรหัสตัวอย่างที่แนบมา

1. ต้องการไฟล์ JS: jQuery.Mailautocomplete-3.1.js

การคัดลอกรหัสมีดังนี้:

(ฟังก์ชั่น ($) {

$ .fn.mailautocomplete = function (ตัวเลือก) {

var defaults = {

BoxClass: "Maillistbox", // สไตล์กล่องภายนอก

ListClass: "Maillistdefault", // สไตล์รายการเริ่มต้น

FocusClass: "Maillistfocus", // เลือกสไตล์ในรายการ

Markcalss: "MaillisthLignt", // สไตล์ไฮไลท์

Zindex: 1,

Autoclass: จริง // ว่าจะใช้ปลั๊กอินกับสไตล์คลาสของตัวเอง

Mailarr: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "สด com "," sohu.com "," sina.com "], // email array

TexThint: FALSE, // การแสดงผลอัตโนมัติและซ่อนข้อความแจ้ง

Hinttext: "",

FocusColor: "#333",

Blurcolor: "#999"

-

การตั้งค่า var = $ .extend ({}, ค่าเริ่มต้น, ตัวเลือก || {});

// หน้าโหลดสไตล์ CSS

if (settings.autoclass && $ ("#maillistappendcss"). size () === 0) {

$ ('<style id = "maillistappendcss" type = "text/css">. maillistbox {border: 1px solid #369; พื้นหลัง: #fff; แบบอักษร: 12px/20px arial;}. จดหมาย เคอร์เซอร์: Pointer; White-Space: Nowrap;}. Maillistfocus {padding: 0 5px; เคอร์เซอร์: ตัวชี้; Space White-space: Nowrap; พื้นหลัง:#369; สี: สีขาว;} MaillisthLignt {color: #ffff;} </style> '). ภาคผนวก ($ ("head"));

-

var cb = settings.boxclass, cl = settings.listclass, cf = settings.focusclass, cm = settings.markcalss;

var z = settings.zindex, newarr = mailarr = settings.mailarr, hint = settings.texthint, text = settings.hinttext, fc = settings.focuscolor, bc = settin gs.blurcolor;

// สร้างเนื้อหารายการภายในของอีเมล

$ .CreateHTML = function (str, arr, cur) {

var mailhtml = "";

ถ้า ($. isarray (arr)) {

$ .Each (arr, function (i, n) {

ถ้า (i === cur) {

mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';

}อื่น{

mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';

-

-

-

ส่งคืน mailhtml;

-

// ตัวแปรทั่วโลกบางตัว

ดัชนี var = -1, s;

$ (นี่) .each (ฟังก์ชัน () {

var that = $ (this), i = $ (". justforjs"). size ();

if (i> 0) {// ผูกเฉพาะกล่องข้อความเดียว

กลับ;

-

var w = that.outerwidth (), h = that.outerheight ();

// การเริ่มต้นสไตล์

That.wrap ('<span style = "แสดง: inline-block; ตำแหน่ง: สัมพัทธ์;"> </span>')

. ก่อน ('<div id = "maillistbox _'+i+'" style = "min-width:'+w+'px; _width:'+w+'px; ตำแหน่ง: Absolute; ซ้าย: -6000px; top:'+H+ 'px; z-index:'+z+'; "> </div>');

var x = $ ("#maillistbox_" + i), livevalue;

That.focus (function () {

// ระดับของแท็กแม่

$ (นี่) .css ("สี", fc) .parent (). css ("z-index", z);

// แสดงและซ่อนข้อความพรอมต์

ถ้า (คำแนะนำ && ข้อความ) {

var focus_v = $ .trim ($ (this) .val ());

if (focus_v === ข้อความ) {

$ (นี่) .val ("");

-

-

// กิจกรรมคีย์บอร์ด

$ (นี่) .KeyUp (ฟังก์ชั่น (e) {

S = V = $ .TRIM ($ (นี่) .val ());

if (/@/. test (v)) {

s = v.replace (/@.*/, "");

-

if (v.length> 0) {

// ถ้าคีย์ขึ้นและลงคีย์

if (e.keycode === 38) {

//ขึ้น

ถ้า (ดัชนี <= 0) {

index = newarr.length;

-

ดัชนี--;

} อื่นถ้า (e.keycode === 40) {

//ลง

if (index> = newarr.length - 1) {

ดัชนี = -1;

-

ดัชนี ++;

} อื่นถ้า (e.keycode === 13) {

//เข้า

if (index> -1 && index <newarr.length) {

// หากมีรายการเปิดใช้งานในปัจจุบัน

$ (นี่) .val ($ ("#maillist _"+index) .text ());

-

}อื่น{

if (/@/. test (v)) {

ดัชนี = -1;

// รับค่าหลังจาก @

// s = v.replace (/@.*/, "");

// สร้างอาร์เรย์ที่ตรงกันใหม่

var site = v.replace (/.*@/, "");

newarr = $ .map (mailarr, function (n) {

var reg = ใหม่ regexp (ไซต์);

if (reg.test (n)) {

กลับ n;

-

-

}อื่น{

Newarr = Mailarr;

-

-

x.html ($. createhtml (s, newarr, index)). css ("ซ้าย", 0);

if (e.keycode === 13) {

//เข้า

if (index> -1 && index <newarr.length) {

// หากมีรายการเปิดใช้งานในปัจจุบัน

x.css ("ซ้าย", "-6000px");

-

-

}อื่น{

x.css ("ซ้าย", "-6000px");

-

}). เบลอ (ฟังก์ชัน () {

ถ้า (คำแนะนำ && ข้อความ) {

var blur_v = $ .trim ($ (this) .val ());

if (blur_v === "") {

$ (นี่) .val (ข้อความ);

-

-

$ (นี่) .css ("สี", bc) .unbind ("keyup"). parent (). css ("z-index", 0);

x.css ("ซ้าย", "-6000px");

-

// เมาส์ผ่านเหตุการณ์รายการ

// เมาส์ผ่าน

$ (". mailhover"). live ("mouseover", function () {

index = number ($ (นี่) .attr ("id"). แยก ("_") [1]);

liveValue = $ ("#maillist _"+index) .text ();

x.children ("." + cf) .removeclass (cf) .AddClass (CL);

$ (นี่) .AddClass (CF) .removeClass (CL);

-

-

x.bind ("mousedown", function () {

นั่น val (livevalue);

-

-

-

}) (jQuery);

2.JQ ห้องสมุดเป็นสิ่งจำเป็นแน่นอนดังนั้นฉันจะพลาดที่นี่

ลองทดสอบด้านล่าง

3. แผ่นสไตล์:

การคัดลอกรหัสมีดังนี้:

<style type = "text/css">

.OUT_BOX {Border: 1px Solid #CCC;

.list_box {border-bottom: 1px solid #EEE;

.focus_box {พื้นหลัง:#f0f3f9;}

.mark_box {color:#c00;}

</style>

4. รหัสทดสอบ

การคัดลอกรหัสมีดังนี้:

<p> การแสดงคลาสที่กำหนดเอง: <อินพุต type = "text" id = "customtest" size = "28" /> </p>

<script src = "js/jQuery-1.6.min.js" type = "text/javascript"> </script>

<script src = "js/jquery.mailautocomplete-3.1.js" type = "text/javascript"> </script>

<script type = "text/javascript">

$ (function () {

$ ("#customtest"). mailautocomplete ({

BoxClass: "out_box", // สไตล์กล่องภายนอก

ListClass: "list_box", // สไตล์รายการเริ่มต้น

FocusClass: "focus_box", // เลือกสไตล์ในรายการ

Markcalss: "mark_box", // ไฮไลต์สไตล์

autoclass: เท็จ

Texthint: จริง // ข้อความแจ้งจะถูกซ่อนไว้โดยอัตโนมัติ

Hinttext: "โปรดป้อนที่อยู่อีเมลของคุณ"

-

-

</script>