jQuery Autocomplete like Facebook With Demo

jQuery facebook autocomplete live demo

Following are the code snippet example for Autocomplete (similar the facebook autocomplete).

Code Example:

<link charset="utf-8" href="//www.emposha.com/demo/fcbkcomplete_2/style.css" media="screen" rel="stylesheet" type="text/css"></link>
        <script charset="utf-8" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
        <script charset="utf-8" src="//www.emposha.com/demo/fcbkcomplete_2/jquery.fcbkcomplete.js" type="text/javascript"></script>

        <h1>
JQuery Autocomplete similar to facebook</h1>
<div id="text">
</div>
<form accept-charset="utf-8" action="submit.php" method="POST">
<select id="select3" name="select3">
                <option class="selected" value="sleep">sleep</option>
                <option value="sport">sport</option>
                <option value="freestyle">freestyle</option>
            </select>
            <br />
<input type="submit" value="Send" />
        </form>
<script type="text/javascript">
          /** json_url data **/
        var jsonData=[{"key": "hello world", "value": "hello world"}, {"key": "movies", "value": "movies"}, {"key": "ski", "value": "ski"}, {"key": "snowbord", "value": "snowbord"}, {"key": "computer", "value": "computer"}, {"key": "apple", "value": "apple"}, {"key": "pc", "value": "pc"}, {"key": "ipod", "value": "ipod"}, {"key": "ipad", "value": "ipad"}, {"key": "iphone", "value": "iphone"}, {"key": "iphon4", "value": "iphone4"}, {"key": "iphone5", "value": "iphone5"}, {"key": "samsung", "value": "samsung"}, {"key": "blackberry", "value": "blackberry"}]
        /** json_url data **/
        
            $(document).ready(function(){                
                $("#select3").fcbkcomplete({
                    json_url: "http://www.emposha.com/demo/fcbkcomplete_2/data.txt",// This must be in your server
                    addontab: true,                   
                    maxitems: 2,
                    height: 2,
                    cache: true
                });
            });
        </script>
        
        <div id="testme">
</div>

Best Related Posts are Following:

1. How can I check DOM is ready in jQuery.
2. How to add new row in existing table using jQuery.
3. What is difference between event.preventDefault() and return false in Javascript?.
4. How to Include a JavaScript file in another JavaScript file?.
5. How can I get query string values in JavaScript and jQuery?.
6. What is the Correct content-type of JSON and JSONP?.
7. jQuery Mobile interview questions and answers.
8. How to Add attribute in A-Tag using jQuery.
9. Lightbox vs Fancybox.
10. Firebase Chat with Facebook and Twitter Integration.
11. jQuery datepicker first week monday.
12. How to Create A Basic Plugin In JQuery.
13. Difference between JSON and JSONP.
14. jQuery Function with Examples.
15. jQuery Fancybox.
16. jQuery Autocomplete.
17. jQuery Slider Flowplayer Links with Demo.
18. jQuery multi column sorting with jQuery - Live Demo.
19. jQuery Facebook Autocomplete With Demo.
20. jQuery naming convention - jQuery tutorial for beginner.
21. How to Select / Deselect All Checkboxes using jQuery.

How to embed muted youtube video with autoplay

Question:How to Embed muted youtube video with autoplay?

<iframe allowfullscreen="" frameborder="0" height="300px" id="ytplayer" src="https://www.youtube-nocookie.com/embed/2gcfHpGpsOw?rel=0&amp;enablejsapi=1&amp;autoplay=1&amp;controls=1&amp;showinfo=0&amp;loop=1&amp;iv_load_policy=3" type="text/html" width="400px"></iframe>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}    
    </script>

Question:How to Embed muted youtube video without autoplay?

<iframe allowfullscreen="" frameborder="0" height="300px" id="ytplayer" src="https://www.youtube-nocookie.com/embed/2gcfHpGpsOw?rel=0&amp;enablejsapi=1&amp;autoplay=0&amp;controls=1&amp;showinfo=0&amp;loop=1&amp;iv_load_policy=3" type="text/html" width="400px"></iframe>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}    
    </script>

Demo

Best Related Posts are Following:

1. How to integrate facebook like button in website?.
2. How to add multiple og image tag for open graph API.
3. Facebook SDK does not loading all.js.
4. How to logout from facebook with javascritp SDK - FB.logout.
5. Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile.
6. Facebook Login Integration - Multiple Facebook IDs for the same user[Solved].
7. Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest.
8. Disable facebook notification popup after Click on Facebook Like Button.
9. How to share Embed youtube video on facebook From my website.
10. How to Find a Facebook Profile From an Image URL.
11. How to integrate Facebook open Graph API in Website.

How to integrate facebook like button in website?

Question: What is facebook like button?
Facebook give an embed code for like button, when you embed code this code people can like your page with this. They can also view friends who already have like your page.

Question: What are the requirement for facebook like button?
You must have following:

1. Facebook Account
2. Facebook App, If not https://www.facebook.com/help/172925542764476
3. An Website where you will you will embed the code.

Question: How to get embed code for like button?
Open https://developers.facebook.com/docs/plugins/like-button and follow below steps

1. Choose an URL of a website Page you want to use with the like button.
2. Code Configurator from https://developers.facebook.com/docs/plugins/like-button#configurator
3. Click on "Get Code" and past the code in website

Question: Give the sample code of Facebook like button?

<div id="fb-root">
</div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=508427595967225";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in" data-layout="standard" data-share="true" data-show-faces="true">
</div>

Output

Best Related Posts are Following:

1. How to add multiple og image tag for open graph API.
2. Facebook SDK does not loading all.js.
3. How to logout from facebook with javascritp SDK - FB.logout.
4. Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile.
5. Facebook Login Integration - Multiple Facebook IDs for the same user[Solved].
6. Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest.
7. Disable facebook notification popup after Click on Facebook Like Button.
8. How to share Embed youtube video on facebook From my website.
9. How to Find a Facebook Profile From an Image URL.
10. How to integrate Facebook open Graph API in Website.
11. How to clear Facebook image cache.
12. Facebook Comments Disable Comment using Yahoo, AOL or Hotmail.
13. Facebook comments Integration in website.
14. Facebook login with javascript SDK example.
15. Facebook User Profile Get Custom Picture of Facebook User.
16. Facebook Login with JavaScript.
17. Firebase Chat with Facebook and Twitter Integration.
18. Facebook Registration Plugin with Custom Fields.
19. Facebook Social Plugins Integration in Website.
20. jQuery Autocomplete like Facebook With Demo.

How to add multiple og image tag for open graph API

Just use the og:image multiple times.
See Example below:

<meta property='og:url' content='http://www.web-technology-experts-notes.in/' />
<meta property='og:title' content='Web technology experts notes' />
<meta property='og:description' content='Web technology experts notes' />
<meta property='og:site_name' content='http://www.web-technology-experts-notes.in/' />
<meta property='og:type' content='website' />
<meta property='og:image' content='http://img.youtube.com/vi/EwznozFWcTs/mqdefault.jpg' />
<meta property='og:image' content='http://img.youtube.com/vi/Dg_IN8jAoag/mqdefault.jpg' />
<meta property='og:image' content='http://img.youtube.com/vi/LauTDyg2ovg/mqdefault.jpg' />
<meta property='og:image' content='http://img.youtube.com/vi/1WOO2kT-ryE/mqdefault.jpg' /> 

Best Related Posts are Following:

1. Facebook SDK does not loading all.js.
2. How to logout from facebook with javascritp SDK - FB.logout.
3. Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile.
4. Facebook Login Integration - Multiple Facebook IDs for the same user[Solved].
5. Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest.
6. Disable facebook notification popup after Click on Facebook Like Button.
7. How to share Embed youtube video on facebook From my website.
8. How to Find a Facebook Profile From an Image URL.
9. How to integrate Facebook open Graph API in Website.
10. How to clear Facebook image cache.
11. Facebook Comments Disable Comment using Yahoo, AOL or Hotmail.
12. Facebook comments Integration in website.
13. Facebook login with javascript SDK example.
14. Facebook User Profile Get Custom Picture of Facebook User.
15. Facebook Login with JavaScript.
16. Firebase Chat with Facebook and Twitter Integration.
17. Facebook Registration Plugin with Custom Fields.
18. Facebook Social Plugins Integration in Website.
19. jQuery Autocomplete like Facebook With Demo.

Facebook SDK does not loading all.js

//connect.facebook.net/en_US/all.js

Facebook SDK is NOT Loading properly OR Facebook Login is not working in Few system, Might cause following reasons.

1. Are you including JS with http OR https like below:

   http://connect.facebook.net/en_US/all.js
    OR
   https://connect.facebook.net/en_US/all.js

   If Yes, remove the "http:" OR "https://"
2. Browser plugin is prevent to load the facebook js
3. Blocking by Firewalls OR Antivirus
4. Make sure you put that snippet in the <body></body> and not <head></head>
5. facebook APPLICATION id  is in-correct.

Not Yet Fixed, Then below Code.

<script>
    function statusChangeCallback(response) {
        console.log('ok');
        if (response.status === 'connected') {
            console.log('You are login successfuly');
        } else if (response.status === 'not_authorized') {
            FB.login();
        } else {
            FB.login();
        }
    }

    // This function is called when someone finishes with the Login
    // Button.  See the onlogin handler attached to it in the sample
    // code below.
    function checkLoginState() {
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId: 'FACEBOOK_APP_ID',
            cookie: true, // enable cookies to allow the server to access 
            // the session
            xfbml: true, // parse social plugins on this page
            version: 'v2.2' // use version 2.2
        });

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });

        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {
                    console.log(response);//Here you have login details
                    document.getElementById('loginId').style.display = 'none';
                    document.getElementById('alreadyLogin').style.display = 'block';

                });
            } else {
                document.getElementById('loginId').style.display = 'block';
                document.getElementById('alreadyLogin').style.display = 'none';
            }
        });

    };

    // Load the SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id))
            return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script> 
<input id="loginId" onclick="checkLoginState()" style="display: none;" type="button" value="Click To Login in Facebook" />
<input id="alreadyLogin" style="display: none;" type="button" value="Already Login in Facebook" /> 

Best Related Posts are Following:

1. How to logout from facebook with javascritp SDK - FB.logout.
2. Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile.
3. Facebook Login Integration - Multiple Facebook IDs for the same user[Solved].
4. Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest.
5. Disable facebook notification popup after Click on Facebook Like Button.
6. How to share Embed youtube video on facebook From my website.
7. How to Find a Facebook Profile From an Image URL.
8. How to integrate Facebook open Graph API in Website.
9. How to clear Facebook image cache.
10. Facebook Comments Disable Comment using Yahoo, AOL or Hotmail.
11. Facebook comments Integration in website.
12. Facebook login with javascript SDK example.
13. Facebook User Profile Get Custom Picture of Facebook User.
14. Facebook Login with JavaScript.
15. Firebase Chat with Facebook and Twitter Integration.
16. Facebook Registration Plugin with Custom Fields.
17. Facebook Social Plugins Integration in Website.
18. jQuery Autocomplete like Facebook With Demo.