0

ColdFusion クエリに基づくカテゴリでオートコンプリートを生成する必要があります。これが私のクエリです：

<cfquery name = "GetEvents" datasource = "tcc">
SELECT '{ label: "' + cE_Title + '", category: "Tournaments" }' as cE_Title
,'{ label: "' + cE_Location + '", category: "Locations" }' as cE_Location
FROM CourseEvents

次に、各レコードをリストに入れ、リストを追加し、リストを配列に変換します。

<cfset myList = ValueList(GetEvents.cE_Title)>
<cfset myList2 = ValueList(GetEvents.cE_Location)>
<cfset myListApp = ListAppend(myList,myList2)>
<cfset myArrayList = ListToArray(myListApp)>

そして、ここに私のスクリプトがあります：

<script>
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
_enderMenu: function( ul, items ) {
  var that = this,
    currentCategory = "";
  $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
      ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
      currentCategory = item.category;
    }
    that._renderItemData( ul, item );
  });
}
});
</script>
<script>
  $(function() {
    <cfoutput>
       var #toScript(myArrayList, "jsVar")#;
    </cfoutput>
    var availableTags = jsVar;

    $( "#EventSearch" ).catcomplete({
     delay: 0,
     source: availableTags
    });
  });
</script>

結果は次のように表示されます。

Tournaments
 2nd Annual March Madness Scramble
 River Run Golf Classic

Locations
 Trump International Golf Club
 Stoneybrook Golf and Country Club

ただし、次のように表示されます。

{ label: "2nd Annual March Madness Scramble"
category: "Tournaments" }
{ label: "River Run Golf Classic"
category: "Tournaments" }
{ label: "Trump International Golf Club"
category: "Locations" }
{ label: "Stoneybrook Golf and Country Club"
category: "Locations" }

ここにデモがあります: http://www.thecoursecaddy.com/c/sandbox/golfevents.cfm

どんな助けでも大歓迎です。

4

1 に答える 1

1

これがその方法です。 こちらのデモをご覧ください。

みんなの助けに感謝します。

<!--- Get List of Events --->
<cfquery name = "GetEvents" datasource = "tcc">
SELECT cE_Title, cE_Location
FROM CourseEvents
</cfquery>

<cfset dataset = [] />

<cfloop query="GetEvents">
 <cfset record = {} />
 <cfset record['label'] = GetEvents.cE_Title />
 <cfset record['category'] = "Tournaments" />
 <cfset ArrayAppend(dataset, record) />
</cfloop>

<cfloop query="GetEvents">
 <cfset record = {} />
 <cfset record['label'] = GetEvents.cE_Location />
 <cfset record['category'] = "Locations" />
 <cfset ArrayAppend(dataset, record) />
</cfloop>

<style>
.ui-autocomplete-category {
 font-weight: bold;
 padding: .2em .4em;
 margin: .8em 0 .2em;
 line-height: 1.5;
 font-size:13px;
}
.ui-menu-item a {
 font-size:11px;
}
</style>
<script>
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
 _renderMenu: function( ul, items ) {
  var that = this,
    currentCategory = "";
  $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
      ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
      currentCategory = item.category;
    }
    that._renderItemData( ul, item );
  });
 }
});
</script>
<script>
 $(function() {
  <cfoutput>
     var jsVar = #SerializeJSON(dataset)#;
  </cfoutput>
  var availableTags = jsVar;

  $( "#EventSearch" ).catcomplete({
   delay: 0,
   source: availableTags
  });
});
</script>

<body>
 <cfform action="#cgi.script_name#" method="post">
  <cfinput type="text" id="EventSearch" name="EventSearch">
 </cfform>
</body>
于 2013-01-24T20:13:47.660 に答える