cfinputタグのautosuggestを使ってみる

cfinputタグのautosuggestを使ってみる

Clock Icon2011.08.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今更ですがどんな感じなのか試してみました。

早速サンプルソースから(sample2.cfm)

<cfform name="userForm">
	<table>
	<tr>
	<td>
	ID
	</td>
	
	<td>
		<cfinput id="Person_Name" name="Person_Name" autosuggest="cfc:jp.classmethod.UserService.getIDNames({cfautosuggestvalue})" />
	</td>
	</tr>
	</table>
</cfform>

D/Bアクセス側のサンプルソース(UserService.cfc)

<cfcomponent output="false">
	<cffunction name="getIDNames" access="remote" returntype="array" output="false">
        <cfargument name="suggestvalue" required="true">
        
        <!--- この関数は選択候補を配列として返します。 --->
        <cfset var namearray = ArrayNew(1)>
        <!--- 入力された文字に一致する固有の姓をすべて取得します。 --->
        <cfquery name="getDBLoginIDs" datasource="blogdb">
        SELECT DISTINCT(Person_Name_Alfa) FROM Blog_Employee
        WHERE Person_Name_Alfa like <cfqueryparam value="#suggestvalue#%" cfsqltype="cf_sql_varchar">
        </cfquery>

        <!--- クエリーを配列に変換します。 --->
        <cfloop query="getDBLoginIDs">
            <cfset arrayAppend(namearray, getDBLoginIDs.Person_Name_Alfa)>
        </cfloop>
        <cfreturn namearray>
    </cffunction>
</cfcomponent>

※参考までにD/Bテーブルは以下です。

実行結果です。

入力を補助してくれるので、うまく応用すればなんか使い道はありそうな感じです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.