JSFiddle - React, Tailwind, and code Playground

by andreas_karz

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="http://www.justgoscha.com/allmighty-autocomplete/style/autocomplete.css">
<script src="http://www.justgoscha.com/allmighty-autocomplete/script/autocomplete.js"></script>
<div ng-controller="mainController">
    <input name="REQ0JourneyStopsS0G" type="text" ng-model="selected" readonly />
    <autocomplete 
        model="selected2" 
        data="stations" 
        placeholder="Start"
        on-type="updateStations"
        class="test"
        attr-name="REQ0JourneyStopsS0G"
    ></autocomplete>

    <br />{{selected2}}
</div>

CSS

.test{
    cursor:pointer;
}

.autocomplete ul{
    background-color:white;
    margin:0;
}

JavaScript

APP = angular.module('APP', ['autocomplete']);

APP.controller('mainController', function ($rootScope, $scope, $http) {

    $scope.stations = [];
    $scope.selected = "";
    
    $scope.updateStations = function(newValue){
        $scope.selected = newValue;
        if(newValue && newValue.length > 3){
            $.ajax({
                url: "http://fahrplan.sbb.ch/bin/ajax-getstop.exe/dny",
                jsonp: "SLs.sls",
                data: {
                    REQ0JourneyStopsS0G: newValue, // Suchbegriff
                    disableEquivs: "yes",  // don't use nearby stations
                    REQ0JourneyStopsB: 15, // max. Anzahl Treffer
                    getstop : 1, 
                    start:1,
                    REQ0JourneyStopsS0A:1
                },
                dataType: "jsonp",
                success: function( response ) {
                    // console.log( response ); // server response
                }
            });
        }
    }

    

    
    SLs = {
        sls : {},
        showSuggestion : function(){
            var tArray = [];
            this.sls.suggestions.forEach(function(entry) {
                tArray.push(entry.value);
            });
            $scope.stations = tArray;
            $scope.$apply();
        }
    };



});