Ipb 2.1:Using Type-ahead AJAX
From IpbWiki
IPB 2.1 comes with a new javascript file that displays a "Google suggest" style type-ahead box via XMLHttpRequest (ajax). This is mainly used to find member's names.
If you wish to use this in your own IPB modifications, ensure that the following requirements have been met.
Before the opening FORM tag, you must include the actual javascript file like so:
And you must also create a hidden DIV like so:
The ID of this DIV must be "ipb-get-members". The width of the DIV must be the same width as the type-ahead designated input field to complete the illusion.
After the closing FORM tag (doesn't have to be immediately after), make sure you initialize the function by adding:
// INIT find names
init_js( 'postingform', 'entered_name', 'get-member-names');
// Run main loop
setTimeout( 'main_loop()', 10 );
</script>
"postingform" is the ID of the post form "entered_name" is the ID of the input field designated for type-ahead "get-member-names" is the "do=" part of the "act=xmlout" URL used to generate result
You must make sure that your opening FORM tag has an ID which matches the one passed into the init_js function. You must also make sure that the type-ahead input field has autocomplete='off' to prevent FireFox from overwriting our type-ahead with its own cache.
Here is a complete example:
<div id='ipb-get-members' style='border:1px solid #000; background:#FFF; padding:2px;position:absolute;width:210px;display:none;z-index:1'></div>
<form method='post' id='postingform'>
Find a member: <input type="text" id='entered_name' name="entered_name" size="30" autocomplete='off' style='width:210px' value="" />
</form>
<script type="text/javascript">
// INIT find names
init_js( 'postingform', 'entered_name', 'get-member-names');
// Run main loop
setTimeout( 'main_loop()', 10 );
</script>