I really appreciate facebook guys for making such a excellent UI.Whenever i see any new feature in facebook i get amazed “How did they made it?”.One day i saw a script for adding multiple recipients to messages and this script grabbed my attention like other scripts on facebook.In first look this script seem critical and innovative to me (may be because i was new to web development that time) but later on after long time i found that it was nothing but sight Cheating.i decided to make exact same script and I MADE IT.
I have made this with jquery,
Implimentation Step By Step
-
1) Include javascript and stylesheet
12<script src="js/jquery.js"></script><script src="js/facebookStyleInput.js"></script> -
2) Creating wireframe
1<link rel="stylesheet" type="text/css" href="styles/facebookStyleInput.css">add below text to your page123<div id="fb_holder"><input type="text" name="friends" id="fb_inputbox"></div>id=”fb_holder” can be anything you want. you can replace “fb_holder” with any other string. -
3) Attach wireframe to javascript (initialisation)
12345<script type="text/javascript">var mainHolder = "#fb_holder";var inputBox = "#fb_inputbox";var ajaxFilePath = "";</script>Assign whatever element names you have used in wireframe to the javascript variables.ajaxFilePath will hold path of file that will return matched list.if your file is in folder ajax then ajaxFilePath = “ajax/ajax_server.php” -
4) Database Installation
a) In the same directory you should find files named facebook.sql and config.php.b) Import facebook.sql to Mysql.b) Open config.php file and make neccessary changes in it. -
5) Other Settings
Make sure that ajax_server.php file resides in same directory where index.php file is,but if you want to change its location then you need to make change in configuration variable named ajaxFilePath enter full path of ajax_server.php file. -
6) And you are ready to go…!
Contact
Comments and suggestions are always welcome, your suggestions will help make this script more useful.so if you have suggestion do contact me at www.amitpatil.me/contact or follow me on twitter
Thanks for the info
Hi Amit,
great script,just like google suggest, great work.
Can you get in touch with me at 9681298317 or my email please.
I’m going to take a stab at using this with just classic ASP with access database. Me likey 🙂
I’m not sure how it works, really. Do you put this codes in your own website and let people to suggest their friends? Please contact me via email as I may need your help…Many thanks in advance.
Nice to hear from you. well, this is just a simulation of facebooks page. this script is not connected with facebook anyhow. i have just made its UI and functionality like one of facebook page.
i m sure u r under impression that this script automatically adds frinds to facebook friends list, if so its not.
Thank u very much
Love U
Just wanted to drop a note and say thank you. Had to make some edits to pass an id for the user, but easy to do:) Thanks!
pls am new to php programming.and i will love to develop one myself.can you help me go about it.i followed you up from planet source code and i really love your application.more power to your elbow.
how we can post all values added to textbox
Hello visitors,
I have updated the script and from now onwards you can pass ids to next page. Thanks for the suggestion.
My idea behind making this was just to copy facebooks UI so i never thought about passing selected ids to next page. it should be there otherwise this is just useless.
So i have added this feature.
Good points all aornud. Truly appreciated.
hi nice sir thanks for help
hello sir nice help me for second time
how can i help u ??
Works great in firefox and chrome, but in ie the main div (#fb_holder) becomes wider than the set width (all added elements appear on a single line instead of wrapping within the main div). Any suggestions? Thanks!
Its old script, it was tested in IE too but i think either you are using latest IE version or i missed that one 😛
I really appreciate with the above information. Thanks for this interesting information.
I keep getting an ‘object doesnt support this property or method’ error, in jquery.js
It seems to only happen in IE. But if you refresh a few times it does sometimes work.
Do you know why this is?
Thanks
I have also faced this crazy and funny thing with IE. It happens a lot in IE 6. Every time there was different solution, so i cant suggest a specific solution. Do u know for which line/word its causing problem ??
It will be awesome if you can explain us, how can we select one friend and if this friends is selected, it doesnt appear more on the list …
😉
THANKS FOR ALL
u will need to pass textarea values to ajax page and make change in query like “where id not in($comma_separated_values_from_textarea)”
The error is:
Message: Object doesn’t support this property or method
Line: 123
Char: 183
Code: 0
URI: /messages/jquery.js
Thanks
is this error related to my script or you are making something else ? which browser u r using ? if u are using IE < 7 then there are few in jquery that IE doesnt support. are u using minified jquery version or regular version ?
Its related to your script. Im using IE8. I am using regualr version of jquery.
Thanks
Which script u r using ? so i can test it on my machine ??
Solved! I seem to have sorted it, i just installed the latest jquery version and now its working fine. Thanks for your help.
Glad to know you sorted it out 🙂
THANKS,GOOD ARTICLE
I LIKE THIS BLOG TIPS.
Amit, could please provide a sample to how to pass the textarea id’s to an ajax form?
what do u mean by ajax form ?? do u mean ajax request ? if so then u can simply pass textarea value by using $(“#selected_ids”).val();
[…] that this should be something divine, like i was thinking about one of the facebook’s script, add friends to the list. In case of facebook it was sight cheating but in case of google its not sight cheating its purely […]
Thanks, Amit. This is an amazing post. I just have a problem in the autocomplete function. When I have list tags on top of this facebook script, they are selected when clicking the arrow down button. Please help identify the problem.
Thanks, Amit. This is an amazing post. I just have a problem in the autocomplete function. When I have list tags on top of this facebook script, they are selected when clicking the arrow down button. Please help identify the problem. Thanks in advance.
i dodnt got ur problem 🙁 please explain more.
I have a set of list tags (data) on top of this fb input box. These lists are selected instead of the autocomplete list box when using down arrow key.
sorry, should be list tags (<ul><li>data</li></ul>)
Jim can u please share printscreen image so i will have exact idea whats happening ??
here you go… thanks!
http://postimage.org/image/xg7nbevs3/
Aha…now i got the idea 🙂
When u use key up-down, other list elements on page become active…right?? I have had this problem before. I will make changes to the script and will get back to you soon…
Check your email…i have sent u updated code. and i am bout to change the source on blog. Thanks for pointing it out.
Thanks a lot. It works now.
I have been try to make this script work for multiple inputs in a while loop.
For instance, see the below html code.
And i have done the below in the javascript code to get the id of each field of the html form.
var each_id = $(‘.main_fb_inputbox’).attr(“id”).replace(‘fb_inputbox’,”);
But still, it only works for the first html form.
Is there any way you can help me out? Thanks in advance…
I am sorry to say but the autocomplete script i am using supports only one instance on 1 page. But if you manage to use any other autocomplete script which other code intact it should work.
Hai, i am still looking on you as regards the question i asked. Thanks…
The major problem now is how to avoid adding multiple ids to the selected text area box.
That is, how to check if a specific id has already been selected and avoid showing it to the user the second time.
Its simple. suppose u have 20,21 selected then send this ID to ajax_server.php file via ajax request. And at the server side make change in query like “where id not in (20,21)” so that values with id 20,21 will get removed from result.
what about insert this data to database Amit…….?
Yes whenever you select any value it stores its id in a textbox which u can use to store in database.
[…] facebook style add friends script […]
is there a way to limit the number of tags? Can i set a max # of tags?
Open index.php and define “var inputLimit = 5;” and in the “facebookStyleInput.js” goto “jQuery.fn.addFriend = function(text,id)” and replace that complete function with this code
Thanks so much!
Hi,
Im new to php, I dont understand anything 🙂
I have register login script (ofcourse not made by myself),
Can this be added to that script?
What would be the way?
I read your installation file but…Im confused.
hello Amit,
I want to remove dublicate added Country name field in TextArea.How can i achieve this through your code so that i should avoid already added country name?Pls provide me help in this issue.
Thank you
This is what you are looking for http://stackoverflow.com/questions/6940103/how-do-i-make-an-array-with-unique-elements-i-e-remove-duplicates
Thanks Amit..I got it.
very nice artilce you have and tricks here thanks
Thanks for wonderful script
Cant download anymore?
Thanks for reporting.