Talk:Fb:typeahead-input
From Facebook Developer Wiki
what is the default value if no option is selected?
Could you please add some more attributes like size, selected, and class?
Class works... at least for typeahead_found --Colin 10:56, 05 May 2009 (BST)
Contents |
[edit] autocomplete="off" on the input box
<fb:typeahead-input name="input_name" autocomplete="off">
Autocomplete needs to be set to off so that the browser's suggestions don't show up on top of the typeahead's suggestions.
[edit] combobox?
Fb:typeahead seems like the logical place to implement a standard combobox widget (like the status menu). Showing a selection of choices is more appropriate in some situations. FB clearly has a script to do this- can these two things been hooked together?
I agree - I'd like to see this drop down similar to the FBJS/Examples/Typeahead FBJS implementation. --500021275 09:47, 27 February 2008 (PST)
[edit] Possible bug?
I didn't want to post this on the bug tracker without making sure this is a bug: In Firefox, the typeahead-input doesn't accept focus when it is nested in a <label> tag. As in <label>Some Label: <fb:typeahead-input [...options...] </fb:typeahead-input></label>
[edit] Add elements with FBJS
Anyone know if it is possible to add an element using FBJS? If not, can we have this functionality added? :) --Colin 10:57, 05 May 2009 (BST)
[edit] One Way To Use Typeahead and it works
I wanted typeahead to be used but from information from one of my tables. I got incredibly frustrated by the paucity of information FB put up about it..though obviously it should work...(well I was betting that it did work .. )
I started playing around with it, and had almost given up.... until in a fit of frustration i just typed in something in value..and bang! the lights went on!!!
I will share this with fellow developers. If you have any suggestions to make it better...would love to hear them
Note though this is pure PHP-FBML code, and you can class it or function it to your hearts desire (which I did cause I want to use it in a few other places.) Hope this will help others...
Remember - In order to get the variable information you must enclose the whole <fb:fbml version="1.1">...</fb:fbml>with a form!
Step #1 - first step is to get the data you need from a table obviously..:
(do_query_XXX) is my function to connect to SQL. Use Yours (obvious again)
$unifind=do_query_XXX("SELECT <field> FROM <table> (add any
Where, and Order and Limits you wish here/");
Step #2 - now put the info into an array (In case you are wondering
the "foreach" construct in php will NOT work here!
So we need a while...and a counter which is $dd) can function this out if you wish
$dd=0;
while ($jj=mysql_fetch_array($unifind)){
$uniar[$dd]=$jj['uniname'];
$dd++;}
Step #3 - O.k. now we need to know how many elements there are in the array...so count em
and set $xcount to 0 and $sam to 1
$dd=count($uniar);
$xcount=0;
$sam=1;
Step #4: can function this out if you wish start the form and start the fbml
<form id="'your_form_Id'" action="where to go to pick up the user input" method="post">
<fb:fbml version="1.1">
<fb:typeahead-input name="the variable you will be picking up" autocomplete="off">
Step #5: Here is the TRICKY PART
see the point where it says value?????
In order to get typeahead to work correctly make sure the VALUE
is the $your_array[element] and the same as what is in the actual field...
and make sure you ECHO both!
(remember fbml and PHP so ? is to escape in and out... "<?=" is short in PHP for "<? echo")
while ($sam <= $dd){
?><fb:typeahead-option value="<?= $uniar[$xcount]; ?>"><?
echo $uniar[$xcount];
$xcount++;
$sam++;
?></fb:typeahead-option><?}
Step #6: close it up
</fb:typeahead-input>
</fb:fbml>
AND NOW -
Step #7: get the form closed up!
<input type="submit" value="Your button name!"></form>';
Voila!
Put it all together...
$unifind=do_query("SELECT <field> FROM <table> (add any Where, and Order and Limits
you wish here/");
$dd=0;
while ($jj=mysql_fetch_array($unifind)){
$uniar[$dd]=$jj['uniname'];
$dd++;}
$dd=count($uniar);
$xcount=0;
$sam=1;
<form id="'your_form_Id'" action="where to go to pick up the user input
and do whatever you want with it" method="post">
<fb:fbml version="1.1">
<fb:typeahead-input name="the variable you will be picking up" autocomplete="off">
while ($sam <= $dd){
?><fb:typeahead-option value="<?= $uniar[$xcount]; ?>"><?
echo $uniar[$xcount];
$xcount++;
$sam++;
?></fb:typeahead-option><?}
</fb:typeahead-input>
</fb:fbml>
<input type="submit" value="Your button name!"></form>';
Hope this avoids frustration for some of you...
FB can do a bit better job of documenting this FBML command...me thinks....:)
Teddy
P.S. ---> I did some testing with a MySql Database and a disk file
MySQL field
With 9,882 records that are being loaded into the typeahead you can expect to wait 2-3 seconds when the screen loads....there is a bit of a delay (less than a second) on the screen when you begin typing..or backspace and type again
With 2000 records or below there seems to be almost no delay whatsoever
With 2000-5000 records expect 1.5 -2 second delay until the array loads etc.
File based
Time increases in all except below 2000 by approximately 1 second (below 2000 there is virtually no delay)
This obviously depends upon your server, the memory you have allocated etc. etc. etc. -- No, this depends on your client -- the javascript is raw JSON and your client (ie. your browser) needs to parse that -- that's where the delay comes from --543396022 06:49, 10 May 2008 (PDT).
I thought disk file may give better results than a table in MySql...However, you may only get faster results with a disk file if you keep it at 1000 or below lines being read into the array. In PHP the coding for it is much less though all you really need is the:
files('myfile.txt'); to get it loaded into an array instead of a loop.
If you are having thousands of rows then you probably want to look at using the AJAX version of this - it will lighten load on both the server and the client browser :)
--Colin 10:11, 05 May 2009 (BST)
