jquery Implementation search keyword automatic matching hint method

Source: Internet
Author: User
Tags object query mootools

In the current web design, improving the user experience is one of the most important content of enterprise. In the search form, according to the input of some of the content of the keyword matching hints function, is the most intuitive and commonly used interactive experience, similar features have been used by most Internet web sites. For example, Google's search box effect is as follows:

Here is a jquery implementation search keyword automatic matching hint method. jquery autocomplete is a search based on jquery keyword automatic matching hint of the plug-in, the plug-in scalability, performance superior performance, easy to integrate into their own projects; compatible with IE 6.0+, FF, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ and other mainstream browsers.

Demo effect :http://www.devbridge.com/projects/autocomplete/jquery/#demo

Here are the specific ways to use them:

1, use settings

First, embed the plug-in's JS code into your own project.

 

2. How to use

Add AutoComplete functionality to the input form for which you want to implement automatic matching prompts.

Initialize the AutoComplete object to ensure that the DOM object is loaded correctly, otherwise the user under IE may receive an error.

$ ("#query"). AutoComplete ({serviceurl: "Service/autocomplete.ashx",//Page for processing AutoComplete requests Minchars:2,//Minimum request length
        For triggering AutoComplete delimiter:/(,;) \s*/,//delimiter for separating requests (a character or regex) maxheight:400,//Maximum height of the suggestion list, in pixels width:300,//list width ZIndex: 9999,//List "s z-index deferrequestby:0,//Request delay (milliseconds), if you do not have prefer to send lots of requ ESTs While the user is typing.
        I usually set the delay at Ms. Params: {country: "Yes"},///Additional parameters Onselect:function (data, value) {},//Callback function, trig  gered If one of the suggested options is selected, lookup: ["January", "February", "march"]//List of suggestions For local AutoComplete}); 

Match the keyword hints according to the input information in the text form.

{
    query: "Li",//Original request
    suggestions:["Liberia", "Libyan Arab Jamahiriya", "Liechtenstein", " Lithuania "],//List of suggestions
    data:[" LR "," LY "," LI "," LT "]//Optional parameter:list of keys for suggestion Opti Ons Used in callback functions.
    }

The JQuery AutoComplete plug-in supports the On/off function, thereby controlling the effect of the switch.

var ac = $ ("#query"). AutoComplete ({/*parameters*/});
    Ac.disable ();
    Ac.enable ();
    Ac.setoptons ({zindex:1001});

3, set the performance style

Finally, use Div and CSS to beautify the performance effect.

     
< Div id= "autocomplete_1240430421731" class= "AutoComplete" style= "width:299px"; >
Liberia
libyan Arab jamahiriya
Liechtenstein
Lithuania
. autocomplete-w1 {Background:url (img/shadow.png) No-repeat bottom right; position:absolute; top:0px; left:0px; margin : 6px 0 0 6px; /* IE6 FIX: * * _background:none; _margin:1px 0 0 0; }
. autocomplete {border:1px solid #999; background: #FFF; cursor:default; text-align:left; max-height:350px; Overflow:auto; margin:-6px 6px 6px-6px; /* IE6 Specific: * * _height:350px; _margin:0; _overflow-x:hidden; }
. AutoComplete. Selected {background: #F0F0F0;}
. AutoComplete div {padding:2px 5px; white-space:nowrap; overflow:hidden;}
. AutoComplete strong {font-weight:normal; color: #3399FF;}

JQuery AutoComplete Plugin Official links

introduction of Plug-ins : www.devbridge.com/projects/autocomplete/jquery/

plugin Download : www.devbridge.com/projects/autocomplete/jquery/#download

Here is also a MooTools framework based on the keyword automatic matching hint method:

MooTools: www.ajaxdaddy.com/mootools-autocomplete.html



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.