jQuery plug-in imitates Baidu search box smart prompt (with Value value)_jquery

Because the company needs to make a search box that imitates Baidu and has a Value. I found only Text on the Internet but none with a Value, so I made one.
Paste the code directly.

Copy code The code is as follows:

(function($) {
var timeid;
var lastValue;
var options;
var c;
var d;
var t;
$.fn.autoComplete = function(config) {
c = $(this);
var defaults = {
width: c.width(), //The width of the prompt box defaults to the same as the text box Same
maxheight: 150, //The maximum height of the prompt box
top: 6, //The top and bottom distance from the text box
url: "", //ajax request address
type: "post ", //ajax request type
async: false, //whether to request asynchronously
autoLength: 0, //request the server if the text length is greater than 0
getValue: function(value){ }, //when Execute when the carriage return or mouse click selects the value
clearValue: function(){ }, //Clear the Value when re-requesting
getText: function(text){ } //When the carriage return or mouse click selects the value Execute when the value is
};
options = $.extend(defaults, config);
var p = c.position();
d = $('

');
c.after(d);
d.css({ "left": p.left, "top": p.top c.height() options .top, "width": options.width, "max-height": options.maxheight });
t = $('d.append(t);
d.append('');
c.bind("keydown", keydown_process );
c.bind("keyup", keyup_process);
c.bind("blur", blur_process);
d.bind("focus", focus_div);
d.bind ("mouseout", mouseout_div);
}
function blur_process()
{
timeid = setTimeout(function(){
d.hide();
},200) ;
}
function mouseout_div()
{
t.find(".nowRow").removeClass("nowRow");
}
function focus_div()
{
clearTimeout(timeid);
c.focus();
}
function keydown_process(e)
{
if(d.is(":hidden")){
return;
}
switch(e.keyCode)
{
case 38:
e.preventDefault();
var p = t.find(".nowRow ").prev();
if(p.length > 0){
d.setScroll(options.maxheight, p);
p.mouseover();
}else{
p = t.find("tr:last");
if(p.length > 0){
d.setScroll(options.maxheight, p);
p.mouseover() ;
}
}
break;
case 40:
e.preventDefault();
var n = t.find(".nowRow").next();
if(n.length > 0){
d.setScroll(options.maxheight, n);
n.mouseover();
}else{
n = t.find( "tr:first");
if(n.length > 0){
d.setScroll(options.maxheight, n);
n.mouseover();
}
}
break;
case 13:
e.preventDefault();
var n = t.find(".nowRow");
if(n.length > 0){
options.getValue(n.find("input:hidden").val());
c.val(n.text());
options.getText(c.val()) ;
lastValue = "";
d.hide();
}
break;
}
}
function keyup_process(e)
{
if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37 || e.keyCode == 39){
return;
}
if(c.val().length > options.autoLength){
if(c.val() == lastValue){
return; // Determine whether it is equal to the last value , considering that the user is typing to avoid multiple requests for the same value
}
lastValue = c.val(); //Record the request value
options.clearValue(); //Clear the value
getData (c, function(data){
if(data.length == 0){
d.hide();
return;
}
t.find("tr") .remove();
$.each(data, function(){
t.append('');
});
var rows = t.find("tr");
rows.mouseover( function(){
t.find(".nowRow").removeClass("nowRow");
$(this).addClass("nowRow");
});
rows. click(function(){
options.getValue($(this).find("input:hidden").val());
c.val($(this).text());
options.getText(c.val());
lastValue = "";
d.hide();
});
c.setPosition();
d. show();
});
}else{
lastValue = "";
d.hide();
}
}
function getData(o,process )
{
$.ajax({
type: options.type,
async: options.async, //Control synchronization
url: options.url,
data: o .attr("id") "=" o.val(),
dataType: "json",
cache: false,
success: process,
Error: function(err) {
alert(err);
}
});
}
$.fn.resetEvent = function()
{
c.bind("keydown", keydown_process) ;
c.bind("keyup", keyup_process);
c.bind("blur", blur_process);
d.bind("focus", focus_div);
d.bind( "mouseout", mouseout_div);
}
$.fn.setPosition = function()
{
var p = c.position();
d.css({ "left" : p.left, "top": p.top c.height() options.top });
}
$.fn.setScroll = function(h, o)
{
var offset = o.offset();
if(offset.top > h){
$(this).scrollTop(offset.top - h);
}else{
if(offset .top < 25){ //The height of the item corresponds to the style sheet td height:25px
$(this).scrollTop(0);
}
}
}
})( jQuery);

Copy code The code is as follows:

#autoComplete_Group {
border: 1px solid #817F82 ;
position: absolute;
overflow-y:auto;
overflow-x:hidden;
display:none;
}
#autoComplete_Group table {
background: none repeat scroll 0 0 #FFFFFF;
cursor: default;
width: 100%;
}
#autoComplete_Group td {
color: #000000;
font: 14px/25px arial ;
height: 25px;
padding: 0 8px;
}
#autoComplete_Group .nowRow {
background-color:#EBEBEB;
}

Copy code The code is as follows:

Copy code The code is as follows:

protected void Page_Load(object sender, EventArgs e)
{
string keyword = Request["txt_company"];
string jsonArray = "[{"text":"Tiantian Co., Ltd.","value":"2"},{"text":"Mingming Co., Ltd.", "value":"4"},{"text":"黄黄有限公司","value":"4"}]";
Response.Write(jsonArray);
Response.End() ;
}

The background only needs to return text and value in json format.
$.fn.resetEvent(); This method is to rebind the event. For example, if the event is lost when appending from one container to another container, you can use this method to rebind the event after appending. There are some parameters below.

Copy code The code is as follows:

var defaults = {
width: c.width (), //The width of the prompt box is the same as the text box by default
maxheight: 150, //The maximum height of the prompt box
top: 6, //The top and bottom distance from the text box
url: "" , //ajax request address
type: "post", //ajax request type
async: false, //whether to request asynchronously
autoLength: 0, //if the text length is greater than 0, request the server
getValue: function(value){ }, //Execute when you press Enter or click the mouse to select the value
clearValue: function(){ }, //Clear the Value when requesting again
getText: function( text){ } //Execute when entering or clicking the mouse to select the value
};

Okay. The only drawback is that if you don’t release the mouse button when clicking on an item, the drop-down box will be hidden. Please refer to my code for details. If you have the ability, you can change it~

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share a ToolTip prompt plug-in I wrote myself (with source code)_jqueryNext article：Share a ToolTip prompt plug-in I wrote myself (with source code)_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved

' this.text '