検索結果をきれいに表示する
li要素が追加できたので
次にソートする
jQuery のget オプションにわたす場合は
エンコーディングしてくれる
つまり、encordeURIComponent()
してしまうと２重エンコードになってしまうため
その場合、意図しない動きになる
“q”: encodeURIComponent($(‘#q’).val()),
を
“q”: $(‘#q’).val(),
にする
そして縦にならんでいるので
これを変える
あと、新しいものを検索したら、どんどん追加されるので
一度クリアすることも実装していく
このクリア方法は
$(‘#list’).empty();
とすればOK
これを for のループ処理前に追記する
empty() は中身を消去する
で、取得できたリストを縦から横並びへ変更するには
CSSで設定を行う
これはHTMLファイルならstyle タグで行う
ソースにすると
ul{
list-style-type:none;
padding:0;
margin:0;
}
list-style-type:none;
を設定することで
・という印を消すことができる
padding:0;
margin:0;
は余白をなくす設定
そして、検索結果を横並びにするソースが
li.movie{
float;left;
width:120px;
padding:10px;
}
li.movie
これは、
li class=”movie”
という意味
CSS では .はクラス名という意味なので
要素名.クラス名
というかき方をする
なので
li 要素の movie クラスという意味になる
float;left;
これで、左寄せになり、続く要素がその右側にくるようになる
通常は、下にどんどん追加されるけど
これを指定すれば、右側にどんどん追加されていく
http://hac-design.com/css/float.html
を参考にしました
width:120px;
padding:10px;
これは幅と余白の設定
画像の幅＝120px
余白=10px
ということ