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 回答