Tuesday, 6 September 2011

jQuery Autocomplete like Facebook With Demo

jQuery Autocomplete like Facebook With Demo

jQuery facebook autocomplete live demo

Fancy facebook-like dynamic inputs with auto complete & pre added values. If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.

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

JQuery Autocomplete similar to facebook</h1>
<div id="text">
<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>
            <br />
<input type="submit" value="Send" />
<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 **/
                    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
        <div id="testme">

No comments :

Post a Comment