(original) jquery plugin-optional optional control

;(function ($) {
$.fn.autofilltextbox = function (options) {
var defaults = {
Nshow:5,//display number of bars
Nlen:10,//Results display word count
URL: "/handler/datarequesthandler.ashx",//URL of request data
Inputcss: ' Autofillbox_input ',//style of the input box
Containercss: ' Autofillbox_container ',//outer container style
Selectcss: ' Autofillbox_select ',//drop-down list style
delay:500,//interval for deferred queries
Onselected:function ($container) {},//event triggered after selection for external invocation
Action: ' type ',//requested operation keyword
Action_name: ' Searchresource ',//requested operation
Name_Field: ' name ',//Query name (Name field in database)
Py_field: ' Pinyin ',//Pinyin for query (phonetic field in database)
other_cond:{},//other query conditions
Enable_fetch_more:true,//whether to enable Find more
Do_fetch_more:function (token) {},//Find more
container_width:0,//Input frame length
Enable_blur:true,//whether to allow the text box to lose focus event
};
var settings = $.extend (defaults, options);
var token = 0;
var mode = ";
/*
* According to the Nlen in the configuration item to obtain the abbreviation of the display result
*/
function _getshortname (name) {
if (name = = NULL)
Return "";
if (Name.length>settings.nlen)
Return name.substr (0, Settings.nlen) + "...";
Else
return name;
}
        
/*
* Display the results of the query
*/
function _showresult ($container, response) {
$container. Children (' ul '). Remove ();
if ((response = = NULL | | response.length = = 0) &&!settings.enable_fetch_more)
Return
var $ul = $ ("<ul></ul>"). addclass (SETTINGS.SELECTCSS);
$.each (response, function (ii, item) {
$ul. Append ("<li id=" "+item.id+" ' title= ' "+item.name+" ' data-fullname= ' "+item.name+" ' ><a style= ' Text-decoration:none ' > "+ _getshortname (item.name) +" </a></li> ");
})
            
if (Settings.enable_fetch_more) {
$ul. Append ("<a class= ' fetch_more ' style= ' text-decoration:none;cursor:pointer ' ><<< find more data >> ></a> ")
}
            
$container. Append ($ul);
$ul. Slidedown (' slow ');
            
$ul. On (' Click ', ' Li ', function () {//todo Here Why use delegate no effect
var $container = $ (this). Parent (). parent ();
_readmode ($ (this));
Settings.onselected ($container);
});
         
$ul. On (' click ', '. Fetch_more ', function () {
Settings.do_fetch_more (token);
mode = ' Fetch_more ';
})
         
};
        
/*
* Edit mode
*/
function _editmode ($img) {
var $container = $img. Parent ();
_initinput ($container);
}
        
/*
* Read-only mode
*/
function _readmode ($li) {
var $container = $li. Parent (). parent ();
var val = $li. attr (' Data-fullname ');
var id = $li. attr (' id ');
_initlabel ($container, ID, Val);
}
        
/*
* Undo Edit
*/
function _redo ($img) {
var $container = $img. Parent (). parent ();
_initlabel ($container);
}

/*
* Query execution
*/
function _dosearch () {
var val = $ (this). Val ();
if (val = = ")
Return
var $container = $ (this). parent ();
var condition = {
namefield:settings[' Name_Field '),
pyfield:settings[' Py_field '),
Key:val,
MaxItem:settings.nShow
};
condition[settings[' action '] = settings[' action_name '];
$.extend (condition, settings.other_cond);
$.getjson (Settings.url, condition)
. Done (function (response) {
_showresult ($container, _formatresponse (response))
})
. Fail (function (response) {
Console.log (response)//todo The error message should be displayed here and automatically disappear after 1s
})
};

/*
Normalize response, because some return a model array, some return a dataset
*/
var _formatresponse = function (response) {
if ($.isarray (response)) {
return response;
}else if (Response.hasownproperty (' ds ')) {
return response.ds;
}else{
return [];
}
}

/*
* Delayed Query
* The basic idea is that the timer will be reset each time the user triggers the query. If the user does not re-enter before the timer is triggered, the query is executed
*/
var _delaycall = (function () {
var timer = null;
return function (FN, delay, $input) {
Cleartimeout (timer);
Timer = setTimeout (function () {
Fn.call ($input);//Use call to bring input into the _search function
}, delay);
};
})();
        
/*
* Initialize the label of the display result
*/
function _initlabel ($container, ID, val) {
mode = ' read ';
if (id = = Undefined && val = = undefined) {
id = $container. attr (' Data-id ');
val = $container. attr (' Data-val ');
}else{
$container. attr ({' Data-id ': ID, ' Data-val ': val});
}
$container. Children (). remove ();
$container. Append ("<span title= '" +val+ "' style= ' width:85% ' >" +_getshortname (val) + "</span> ');
$container. Undelegate (' img ', ' click ');
$container. Delegate (' img ', ' click ', function () {
_editmode ($ (this));
});
}
        
/*
* Show Undo button
*/
function _showredo ($container) {
if ($container. FIND (' img '). length>0)
Return
$container. Children (' input '). After ("<a class= ' Autofillbox_button ' ></a> ");
$container. Undelegate (' img ', ' click ');
$container. Delegate (' img ', ' click ', function () {
_redo ($ (this));
});
}

/*
* Initialize the input text box
*/
function _initinput ($container) {//Initialize input box
mode = ' Write ';
$container. Children (). remove ();
if ($container. Children (). Length = = 0) {
var $input = $ (' <input type= "text" class= "' + settings.inputcss + '" id= "autofilltextbox_x"/> ");
var val = $container. attr (' Data-val ');
$input. Val (Val);
$container. Append ($input);
}
$container. Undelegate (' input ', ' KeyUp ');
$container. Delegate (' Input ', ' KeyUp ', function () {
_delaycall (_dosearch, Settings.delay, this);
});
$container. Undelegate (' Input ', ' click ');
$container. Delegate (' Input ', ' click ', function () {
_dosearch.call (this);
});

if (Settings.enable_blur) {
$container. Undelegate (' input ', ' blur ');
$container. Delegate (' Input ', ' blur ', function () {
var val = $ (this). Val ();
SetTimeout (function () {
_setvalue ($container, ", Val);
}, 250);
});
}

_showredo ($container);
return $container;
}
       
/*
* Initialize Container
*/
function _initcontainer ($container) {//initial textbox CSS
$container. css ({' position ': ' relative '}). addclass (SETTINGS.CONTAINERCSS);
$container. addclass (SETTINGS.CONTAINERCSS);
$container. attr ({' Data-id ': ', ' data-val ': '});
if (Settings.container_width > 0) {
$container. Width (settings.container_width);
}
var t = new Date ();
token = T.gettime ();
$container. attr (' Data-token ', token);//Unique identification of the generated control
return $container;
}

function _setvalue ($container, ID, val) {
if (Mode! = ' Write ')
Return
$container. attr ({' Data-id ': ID, ' Data-val ': val});
_initlabel ($container, ID, Val);
}
        
/*
* Initialize the control
*/
This.each (function () {
var _this = $ (this);
_this = _initcontainer (_this);//initial textbox CSS
_this = _initinput (_this);//Initialize input box
});
        
-------------------------------------------Public Methods----------------------------------------------------
/*
* Get token for the control (unique identifier)
*/
This.gettoken = function () {
return $ (this). attr (' Data-token ');
return token;
};
        
/*
* Set additional query criteria
*/
This.setoptions =function (options) {
$.extend (True, settings, options);//$.extend's first parameter determines whether a deep copy, otherwise Other_cond will be overwritten by the new options
};
        
/*
* Clear Selection results
*/
This.clear = function () {
var $container = $ (this);
$container. attr ({' Data-id ': ', ' data-val ': '});
_initinput ($container);
};
        
This.setvalue = function (ID, Val, triggerselect) {
var $container = $ (this);
$container. attr ({' Data-id ': ID, ' Data-val ': val});
_initlabel ($container, ID, Val);
_setvalue ($container, ID, Val);
if (triggerselect) {
Settings.onselected ($container);
}
};
        
This.getsettings = function () {
return settings;
};
        
return this;
        
}
}) (JQuery);

(original) jquery plugin-optional optional control