Self-made jQuery-based smart notification plug-in

Source: Internet
Author: User
An ajax smart prompt to complete the plug-in. I used it myself. Now I want to make it a plug-in. If you need it, refer to it. Currently, the following functions are implemented:

1The most basic requirement is to retrieve the applicable data based on the characters in the current text box.
1.1 Support calling this plug-in by multiple elements on the same page
1.2 The required parameter is url
1.3 for continuous input, all previous ajax requests will be canceled to avoid unnecessary server pressure ()
1.4 basic call $ ("Myel"). autoCmpt ({url: "url "});
2Empty keyword query switch ( EmptyRequest). When the drop-down list is enabled, a prompt is displayed when the cursor is clicked in the input box. The default value is true. ()
3Supports association query, that is, the prompt result of the current text box can be based on the value of another element on the page
3.1 Only One Associated Element (parent element) is supported, with Parameters ParentIDDefinition, (null by default)
3.2 opened ParentIDIf the Parameter definition useParentValue is set to false (default), the plug-in filters (Associates) its custom attributes; otherwise, the plug-in filters (Associates) its custom attributes ), the value Attribute of the element is associated.
3.2.1 In view of the above situation UseParentValueWhen the attribute is false, this element must be the element that calls this plug-in,
3.2.2 When UseParentValueThe attribute is true. This element must be a form element (that is, the value Attribute must exist), but it does not need to be a smart prompt element.
3.2.3 Not Defined ParentIDIs meaningless.
3.2.4 defined ParentIDIn this case, the parent element must have a value. Otherwise, no message is displayed.
4Supports caching the final query results. (When multiple elements on the page are called, the last submitted element is also determined to determine whether the cache is used)
4.1 currently, only one result of one element can be cached. If you have time, you can extend it to cache the last query result of each element.
5For the default effect, see , Including:
5.1 text description of each item
5.2 pinyin for each item (if any)
5.3 The primary key value (if any) of the database corresponding to each item is invisible
6The multi-column view solves the arrangement of a large number of Short Messages (such as personal names ), ()
6.1 Multi = falseOpen
6.2 pinyin options invisible
6.3 The primary key value is invisible, but it still exists
6.4 It is only available when the number of records retrieved is greater than 32 (4*8, this value is not available currently and is strongly associated with CSS. If you change CSS, it mainly refers to the width of the prompt box, so please change it to the appropriate effect ).
7Too much data can be paged
8.1 currently, the number of entries per page is not supported.
8.2 page turning is not supported at present
8.3 if this element option is Multi = trueThe number of entries on the next page is intelligently determined. When the number is reached, the view is automatically changed to multiple columns; otherwise, the default view is restored. ()
8The keyboard commands for the response include:
Upload Failed: Previous
Else →: Next
Prompt for ESC Cancellation
If the carriage return event is not intercepted, a form is submitted.
9There are requirements on the data format returned by the background. See the description in the plug-in. Currently, four fields are implemented: id, text, Pinyin, and upper-level id. A null value should be sent back even if there is no value.
9.1 is used for small projects, so it is not extended. Otherwise, you can reserve a considerable number of fields and return results using multi-dimensional arrays like google. Now this is enough for common prompts, welcome to expand
10General website solution:
10.1 google uses a common ajax query and returns an array containing query conditions and query results (the return value of this plug-in does not have query conditions)
10.2 baidu uses ajax to return a script. The result is passed as a script parameter and then automatically executed.
10.3 cool news uses the jsonp method of jQuery to return the result set in callback mode (generally I use jsonp for cross-origin purposes, that is, the domain name used to process the request is inconsistent with the current page domain name, the browser will block the submission ).
10.4 this plug-in adopts the first solution. If the smart reminder source is not in this domain, you can change it by referring to Baidu, cool news, and other methods.
11: Local download

SVN: http://jq-intellisense-autocomplete.googlecode.com/svn/trunk/

Note: The downloaded sample project is an asp.net website that requires support from. net framework3.5 and can be published to iis for running or opened with vs2008 +.

, Default view

, Multi-column View

When the number of results is less than one page, the default view is automatically restored.

To cancel the previous ajax request with continuous input.

Related Article

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.