JSFiddle - React, Tailwind, and code Playground

by simucal

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<input type="text" class="symbol-text" title="Enter Symbol or Name" size="25" maxlength="32" />

CSS

.security-sym  
{
    color: #000000;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 9px;
    display: inline-block;
    width: 60px;
}

.security-name
{
    color: #000000;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 9px;
    display: inline-block;
    width: 210px;
}

.security-xch
{
    color: #545454;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 9px;
    display: inline-block;
    width: 60px;
    font-style: italic;
}

JavaScript

/*
 * jQuery UI Autocomplete HTML Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
(function($) {
    var proto = $.ui.autocomplete.prototype,
        initSource = proto._initSource;

    function filter(array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function(value) {
            return matcher.test($("<div>").html(value.label || value.value || value).text());
        });
    }

    $.extend(proto, {
        _initSource: function() {
            if (this.options.html && $.isArray(this.options.source)) {
                this.source = function(request, response) {
                    response(filter(this.options.source, request.term));
                };
            } else {
                initSource.call(this);
            }
        },

        _renderItem: function(ul, item) {
            return $("<li></li>").data("item.autocomplete", item).append($("<a></a>")[this.options.html ? "html" : "text"](item.label)).appendTo(ul);
        }
    });

})(jQuery);



/**
 * Stock Symbol Suggest - jQuery UI Plugin
 *
 */
(function($) {
    $.widget("ui.symbolsuggest", {
        options: {
            source: "https://symbollookupsvcext.scottrade.com/SecuritiesService/SecuritiesService.svc/security/{0}?callback=?",
            delay: 100
        },
        _create: function() {
            var self = this,
                o = self.options,
                $el = self.element;

            $el.autocomplete({
                source: function(req, res) {
                    self._getSuggestions(req.term, res);
                },
                html: true,
                delay: o.delay
            });
        },
        _getSuggestions: function(term, res) {
            var self = this,
                source = self.options.source.replace("{0}", term);

        ...