Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<script src="E:/Siebel/8.1/Client_3/PUBLIC/enu/23030/SCRIPTS/3rdParty/DynaTreeNav/javascript/dynatree/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.9.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.menu.js"></script>
    <script src="../../ui/jquery.ui.autocomplete.js"></script>
 
​
    <script>
         
            function log( message ) {
                                    $( "<div/>" ).text( message ).prependTo( "#log" );
                                    $( "#log" ).attr( "scrollTop", 0 );
                                    }
​
            $.expr[':'].textEquals = function (a, i, m) {
                            return $(a).text().match("^" + m[3] + "$");
                       };
​
​
​
        // Country
        $(function() {
                
                var data1= function( request, response ) {
                                    $.ajax({url:"UD_Test - Data.json", 
                                                 datatype: "json",
                                                 data: {
                                                     name_startsWith: request.term
                                                 },
                                                 success:function(result){   //alert("Input: " +  request.term + "  , Result " + result);
                                                                         var jsn = $.parseJSON(result);  //alert (jsn[1].name);
                                                                         response ( $.map(jsn, function(item) {
                                                                            return {
                                                                                //label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                                                                //value: item.name
                                                                                label : item.name, 
                                                                                value : item.name
                                                                                }
                                                                        }));    
                                                            }   // cars success 
​
                                });  // cars ajax end
​
                            }   
​
​
​
            $("#country" ).autocomplete({
                source: data1,
                minLength: 0
            });  // autocomplete
        });
         
// City
        $(function() {
                    alert ("in city");      
​
                
                    var data = ["India","USA","UK","China","Africa"];
​
​
                        // autocomplete here
                                    $( "#city" ).autocomplete({
                                    source: data,
                                    minLength: 0,
                                    change: function (event, ui) {
                                            //if the value of the textbox does not match a suggestion, clear its value
 
                                            if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
                                                         $(this).val('');
​
                                                                    log( ui.item ?
                                                                    "Selected: " + ui.item.value + ", geonameId: " + ui.item.label :
                                                                    "Nothing selected, input was " + this.value );
                                                                        }                    
​
                                                                } ,
                                    select: function( event, ui ) {
                                                         // console.log(ui);
                                                        log( ui.item ?
                                                        "Selected: " + ui.item.value + ", geonameId: " + ui.item.label :
                                                        "Nothing selected, input was " + this.value );
                                                                }   
                    
                                });  // autocomplete
​
        }); // city function
​
​
​
​
​
                 
​
​
​
​
​
    </script>
 
​
</head>
<body>
​
    <div id="div1"><h2> Default-Country  -> Array</h2></div>
    <div>
        <label for="country">Country: </label>
        <input id="country">
    </div>
​
    <div id="div2"><h2> Data from String -> Autocomplete </h2></div>
    <div class="ui-widget">
        <label for="city">City: </label>
        <input id="city">
    </div>
​
​
    <div id="div3"><h2> Getdata ->  </h2></div>
    <div class="ui-widget">
        <label for="city1">City: </label>
        <input id="city1">
    </div>
     
​
​
    <div class="ui-widget" style="margin-top:2em; font-family:Arial">
        Result:
        <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
    </div>
​
​
​
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers