オートコンプリート JQuery

JQueryでオートコンプリートやりたいと思い、調べました。
jquery.autocomplete.js
といういいものがありました。
これを使えば簡単にオートコンプリートが実装できます。

サンプルとして

<script type='text/javascript' src='js/jquery.autocomplete.js'></script> <script type="text/javascript"> $(document).ready(function(){ 　// イニシャル時にセットアップ 　setAutoCompliete("test"); }); // セットされたときに呼び出されます。 function findValue(li) { if( li == null ) return alert("No match!"); // if coming from an AJAX call, let's use the CityId as the value if( !!li.extra ) var sValue = li.extra[0]; // otherwise, let's just display the value in the text box else var sValue = li.selectValue; alert("The value you selected was: " + sValue); } function selectItem(li) { findValue(li); } // オートコンプリートで表示をどのようにするか？ function formatItem(row) { return row[0] + " (name: " + row[1] + ")"; } // 初期設定 function setAutoCompliete(key){ // PHPを呼び出し var url_text = "/test.php"; $('#' + key).autocomplete(url_text, { onItemSelect : selectItem, onFindValue : findValue, formatItem : formatItem, autoFill:true, cacheLength:10, delay:10, matchSubset:1, matchContains:1, width:300 }); } </script> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~省略 <input type="text" name="test" id="test" value="" />

PHP側の出力

1234|test 5678|test2 9012|test3

のような感じでやります。

これは簡単で便利です

MYSQL 件数 LIMIT OFFSET

よく全体の件数を知りたいけどLimit、Offsetを使ってしまうと
わからないってことになる場面も多いと思う。

その際にはSQL_CALC_FOUND_ROWSを使うと解決できる

SELECT 　SQL_CALC_FOUND_ROWS, 　TEST.* FROM 　TEST LIMIT 　10 OFFSET 　20

と上記を実行した後に

SELECT FOUND_ROWS() AS val

で全体の件数が取れます。
WHERE文とかつけるときに便利ですね

javascript 2度押し防止 DisableSubmit

2度押し制御　HTMLのFormの中ではかなり重要である。
それを簡単にできないかと探していると
DisableSubmit.jsというものがあった。

これはSubmit下タイミングでボタンが無効化するためお手軽にやることができる
下記のように簡単に実装

<script type="text/javascript" src="DisableSubmit.js"></script> // submitボタンにid:buttonとid:button2をつけてあげて // 3秒でディセイブル解除 <script> DisableSubmit.init( { "id":["button","button2"] },3000 ); </script>

参考はここよりhttp://nonn-et-twk.net/twk/javascript-disable-submit

JQuery focus時に枠の色を変える

HTMLでfocus時にGmailみたいに枠の色を変えたいとかあると思います。

非選択時


選択状態


そこで一括で変えるサンプルをのせておきます。

// focus.js

$(function(){ // input type=text password textareaのみ変える処理 　$("input[@type='text'],input[@type='password'],textarea") 　　.focus(function(){ 　　　$(this).addClass("focus"); 　　}) 　　 　　.blur(function(){ 　　　$(this).removeClass("focus"); 　　}); });

// focus.html

<script src="jquery.js" type="text/javascript"></script> <script src="focus.js" type="text/javascript"></script> <style type="text/css"> .focus { color: #333333; border: 2px solid #fc2e8b; background-color: #ffffff; } </script>

以上これだけでフォームにあるものすべて枠に色が着きます。

FlexBuilder３．０．２ 公開

http://weblogs.macromedia.com/akamijo/archives/2008/11/flexbuilder_302.html


FlexBulider3.0.2公開