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

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:

');
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:

jQuery imitation Baidu prompt box

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~

Related labels：

jquery plugin search bar Smart reminder

source：php.cn

Previous article：Share a ToolTip prompt plug-in I wrote myself (with source code)_jquery Next article：使用jQuery.fn自定义jQuery翻页插件_jquery

Statement of this Website

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

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