AJAX lookup form component:

The component will be defined in the HTML page as a linked set of 2 text inputs.  One (usually hidden) will contain the id of the selected item, the other the associated name or human-readable identifier.  These will share the same element ID prefix (e.g. "user-manager"), with the name text box having a standard suffix (e.g. "user-manager-lookup").  The script should iterate through all input form elements on the page, and automatically apply the JavaScript functions to elements having the "-lookup" suffix and a corresponding id text box.  The script should format the text box to add a down arrow button at the far left mimicking a combo-box, which when clicked will display (or hide) the matching selections.  If the user selects the textbox and types one or more characters the script should submit these characters as a 'prefix' and show the drop-down list prompting a selection or further characters.  Up/down keys should function as expected for a normal list or combo box.

The script will be configured as a linked JavaScript component with a pre-defined base URL which it will append parameters to such as type, prefix, page, parent to specify the data to return.  The returned data will consist of a header and a list of data in the following format.  The header will have a number of properties:

type: abc
format: [list|page|tree]
prefix: abc
matches: n
data: array

for list and page formats only the following will be included:
page: number
pages: number

for tree formats only the following will be included:
parent: id


The data consists of an array: id/name pairs for list and page formats, and id/name/hasChildren for the tree format.  A popup page element prompts the user for the final selection from the matching elements.  If the user selects from the popup list, the (usually hidden) element of the form will have its value set to the id of the selected item.  In the case of a tree format list, an item with a hasChildren flag set to true should have a "+" icon before its name, and if the user clicks this and the items children are not yet known then a new AJAX request should be generated with the base url, the type and the parent id - the returned data should be inserted into the correct position within the list, and the parent icon changed to a '-' (hiding the children if clicked).

The popup element should consist of a scrolling list box placed directly below the parent form element, just like a combo box.  A footer should be added below the scrolling section, listing the total number of matches found.  For page format data the current page number and total pages whould also be displayed here, with left and right arrow icons in the corners linking to the previous and next pages of data (via a new AJAX request if not cached).

The popup element can be reused across the page - i.e. no 2 popup elements will be shown at the same time.  Responses whould be cached within each form element on a parent,prefix,page basis so requests are not repeated when the user switches back and forth between form inputs, prefixes or data pages.  The generated HTML inserted into the DOM will use consistent CSS classes for easy styling.

Sample responses are given below:


list response=
{
    "type":"user",
    "format":"list",
    "prefix":"C",
    "matches":4,
    "data":[
        [12,"Cab"],
        [15,"Carbon"],
        [11,"Cast"],
        [23,"Cat"]
    ]
};

page response=
{
    "type":"user",
    "format":"page",
    "prefix":"C",
    "page":1,
    "pages":3,
    "matches":13,
    "data":[
        [12,"Cab"],
        [15,"Carbon"],
        [19,"Carnagie"],
        [11,"Cast"],
        [23,"Cat"]
    ]
};


tree response=
{
    "type":"user",
    "format":"tree",
    "prefix":"C",
    "parent":null,
    "matches":4,
    "data":[
        [12,"Cab",false],
        [15,"Carbon",true],
        [19,"Carnagie",false],
        [11,"Cast",true]
    ]
};


tree sub-response=
{
    "type":"user",
    "format":"tree",
    "parent":12,
    "matches":3,
    "data":[
        [17,"Cabon",false],
        [18,"Cabric",false],
        [20,"Cabbie",false]
    ]
};