JSFiddle - React, Tailwind, and code Playground

by hideki_a

HTML

<h1>誰が誰につぶやいた？</h1>
<h2>検索フォーム</h2>
<form action="#" method="get" id="searchform">
つぶやかれた人:<input type="text" id="username" value="">
<input type="submit" id="submit" value="search">
</form>
<h2>検索結果</h2>
<div id="searchresult"></div>
<h2>Tweetフォーム</h2>
<form action="#" method="get" id="tweetform">
<textarea></textarea>
<input type="submit">
</form>

CSS

body{
    line-height:1.5;
    font-size:0.75em;
}

h1{
    margin-bottom:1em;
}

h2{
    margin-bottom:0;
}

textarea{
    width:250px;
    height:4em;
    font-size:100%;
}

JavaScript

var URL_SEARCH_API = "http://search.twitter.com/search.json";
var target;

$.widget("ui.searchform", {
    _create: function() {
        var self = this;
        self.widgetEventPrefix = "searchform.";
        self.$input = $(":text", self.element);
        self.element.bind("submit", function(event) {
            event.preventDefault();
            target = self.$input.val();
            var data = {
                val: "@" + target
            };
            self._trigger("submit", event, data);
        });
    },
    reset: function() {
        this.$input.val("");
    }
});

$.widget("ui.searchresult", {
    _create: function() {
        this.widgetEventPrefix = "searchresult.";
    },
    _add: function(screenName) {
        var self = this,
            $li = $("<li>" + screenName + "</li>"),
            listRoot = $("ul", self.element);
        
        if(!listRoot.length) {
            listRoot = $("<ul />").appendTo(self.element);
        }
        listRoot.append($li);
    },
    _setEvent: function() {
        var self = this;
        self.element.delegate("li", "click", function(event) {
            event.preventDefault();
            var data = {
                screenName: this.innerHTML
            };
            self._trigger("select", event, data);
        });
    },
    update: function(keywords) {
        var self = this;
        $.ajax({
            url: URL_SEARCH_API,
            dataType: "jsonp",
            data: {
                result_type: "recent",
                rpp: 10,
                page: 1,
                q: keywords
            }
        }).then(
            function(response) {
                self.reset();
                $.each(response.results, function(index, current) {
                    self._add(current.from_user);
                });
                self._setEvent();
            },
            function() {
                alert("Twitter Error!");
            }
        );
    },
    reset: function() {
       ...