From Facebook Developer Wiki

excellent thanks very much Tyson! 548871286 21:15, 16 October 2007 (PDT)

ok something needs to be done about the code pasted.

when i copy it, it formats really bad when i try to paste it

Copy it from the page editor --1216355791 21:22, 20 May 2008 (PDT)

Contents 1 Workaround for IE 2 Can't get it to work 3 Minor change for alignment purposes 4 Trouble with I.E. if your search box is initially hidden. 5 Absolute position

[edit] Workaround for IE

Don't know if anyone's discovered this already, but there is a way to get this working in IE using <fb:user-agent>.

I added this code to the end of my CSS:

<fb:user-agent includes="ie 6,ie 7">

<style type="text/css"> <!-- .suggest_list { background: transparent; border: 1px solid #bdc7d8; border-top: none; font-size: 11px; margin-top: 23px; overflow: hidden; position: absolute; left: 200px; text-align: left; z-index: 102; } --> </style> </fb:user-agent>

It's the margin-top line that fails in IE, but this should sort it.

---

This only works for the one specific page you use this on. left:200px and position:absolute means never ever put the box anywhere but 200px from the left edge of the container. Its not going to work for most of us.

[edit] Can't get it to work

i renamed the input to "gamename", but FB keeps renaming it <random_characters>_gamename in the input tag, but not in the fbjs code...

Is <random_characters>_ your application ID? -- Pete (563683308 10:00, 21 December 2008 (PST))

yes. i ended being able to make it work, and even turned this script into a more general, configurable thing... 654928022 03:52, 28 December 2008 (PST)

[edit] Minor change for alignment purposes

If my text box wasn't flush up against the left side of my page, the suggest_list div wouldn't align properly underneath the textbox. I got around this by creating a getLeft function, and then calling that function within the show function.

ajaxSuggestFbml.prototype.getLeft = function () {

    var oNode = this.obj; //textbox
    var iLeft = oNode.getAbsoluteLeft() - oNode.getParentNode().getAbsoluteLeft();

    return iLeft;
};

ajaxSuggestFbml.prototype.show = function() {
    var style = {'display': 'block', 'left': this.getLeft() + 'px'};
	this.list.setStyle(style);
};

The layout of my page looks like so:

<!-- make sure to set a height on your containing div or else your suggest_list will get cropped -->
<div style="height: 600px;">
  <p style="height:auto;">Find <input id="stuff_suggest" autocomplete="off" maxlength="20" type="text"/> <fb:submit>Submit</fb:submit></p>
</div>

[edit] Trouble with I.E. if your search box is initially hidden.

To fix it do this. Change the function in the two places highlighted:

function ajaxSuggestFbml(obj, options) {
	this.obj = obj;

	// Setup the events we're listening to
	this.obj.addEventListener('focus', this.onfocus.bind(this))
		.addEventListener('blur', this.onblur.bind(this))
		.addEventListener('keyup', this.onkeyup.bind(this))
		.addEventListener('keydown', this.onkeydown.bind(this))
		.addEventListener('keypress', this.onkeypress.bind(this));

	// Create the dropdown list that contains our suggestions
	this.list = document.createElement('div');
	this.list.setClassName('suggest_list');
/*HERE*/this.list.setStyle({display: 'none'});
        
/*HERE*/if (this.obj.getStyle("display")!='none')
/*HERE*/  this.list.setStyle({width: this.obj.getOffsetWidth()-2+'px'});
  
	this.obj.getParentNode().appendChild(this.list);

	// Various flags
	this.focused = true;
	this.options = options == null ? {} : options;
	this.selectedindex = -1;
	this.delayTime = options.delayTime == null ? 700 : options.delayTime;
	this.preMsgTxt = options.preMsgTxt == null ? "type for suggestions" : options.preMsgTxt;
	this.normOpac = options.menuOpacity == null ? 94 : options.menuOpacity;
	this.curOpac = this.normOpac;

	this.cache = {};
	this.obj.setStyle({margin: "0px"});

	if(!options.focus) {
	  this.preMsg = true;
	  this.obj.setValue(this.preMsgTxt);
	  this.obj.addClassName("suggest_pretext");
	} else {
/*HERE*/  if (this.obj.getStyle("display")!='none')
	    this.obj.focus();
	  this.preMsg = false;
	  this.update_results();
	  this.show();
	}

};

[edit] Absolute position

I suggest to remove the position: absolute from the suggest_list CSS class as it doesn't work for me with this setting.