Динамическая алфавитная навигация

Чтобы создать панель навигации, вы можете сделать что-то вроде этого:

<cfoutput>
<cfloop from="#asc('A')#" to="#asc('Z')#" index="i">
    <a href="###chr(i)#">#chr(i)#</a>
    <cfif asc('Z') neq i>|</cfif>
</cfloop>
</cfoutput>

(CFLOOP не работает с символами, поэтому вам нужно конвертировать в коды ascii и обратно.)

Чтобы отобразить элементы в вашем запросе, вы можете сделать что-то вроде этого.

<cfset currentLetter = "">
<cfoutput query="data">
<cfif currentLetter neq left(data.name, 1)>
    <h3><a name="#ucase(left(data.name, 1))#">#ucase(left(data.name, 1))#</a></h3>
</cfif>
<cfset currentLetter = left(data.name, 1)>
#name#<br>
</cfoutput>

Вы можете использовать функцию группировки запросов в своем запросе записей. Вам, очевидно, придется изменить поля запроса в соответствии с вашими данными, а функция left() может иметь другой синтаксис в зависимости от вашего механизма базы данных. Приведенный ниже запрос работает с MSSQL.

<cfquery datasource="#application.dsn#" name="qMembers">
SELECT firstname,lastname, left(lastname,1) as indexLetter
FROM member
ORDER BY indexLetter,lastName
</cfquery>


<p id="indexLetter">
<cfoutput query="qMembers" group="indexLetter">
    <a href="###qMembers.indexLetter#">#UCase(qMembers.indexLetter)#</a>
</cfoutput>
</p>




<cfif qMembers.recordCount>

    <table>

    <cfoutput query="qMembers" group="indexLetter">
        <tr>
            <th colspan="99" style="background-color:##324E7C;">
                <a name="#qMembers.indexLetter#" style="float:left;">#UCase(qMembers.indexLetter)#</a> 
                <a href="##indexLetter" style="color:##fff;float:right;">index</a>
            </th>
        </tr>

        <cfoutput>
        <tr>
            <td><strong>#qMembers.lastName#</strong> #qMembers.firstName#</td>
        </tr>
        </cfoutput>
    </cfoutput>

    </table>

<cfelse>
    <p>No Members were found</p>
</cfif>

Я бы получил набор результатов SQL, чтобы вернуть список в первую очередь, вы можете легко просто взять первую букву требуемого элемента и количество. Самый быстрый способ - выполнить объединение таблицы из 26 символов (таким образом меньше манипуляций со строками).

В CF используйте значение счетчика, чтобы гарантировать, что если нет результата, вы либо отображаете только букву (как стандартный текст), либо не отображаете ее вообще.

Над сколькими рядами вы собираетесь работать, так как могут быть лучшие способы сделать это. Например, сохранение первой буквы необходимого поля ссылки в отдельном столбце при вставке уменьшит накладные расходы при выборе.

Итак, было много хороших предложений, но ни одно из них не сделало именно то, что я хотел. К счастью, я смог использовать их, чтобы понять, чем я действительно хотел заниматься. Единственное, что не делает следующее, это печатает несколько последних неиспользуемых букв (если они есть). Вот почему у меня есть этот оператор cfif, проверяющий «W», поскольку это последняя буква, которую я использую, иначе он должен проверять Z.

<cfquery datasource="#application.dsn#" name="qTitles">
SELECT title, url, substr(titles,1,1) as indexLetter
FROM list
ORDER BY indexLetter,title
</cfquery>

<cfset linkLetter = "#asc('A')#">
<cfoutput query="titles" group="indexletter">
    <cfif chr(linkLetter) eq #qTitles.indexletter#>
        <a href="###ucase(qTitles.indexletter)#">#ucase(qTitles.indexletter)#</a>
        <cfif asc('W') neq linkLetter>|</cfif>
        <cfset linkLetter = ++LinkLetter>
    <cfelse>
        <cfscript>
        while(chr(linkLetter) != qTitles.indexletter)
                {
                        WriteOutput(" " & chr(linkLetter) & " ");
                        IF(linkLetter != asc('W')){WriteOutput("|");};
                        ++LinkLetter;
                }
        </cfscript>

        <a href="###ucase(qTitles.indexletter)#">#ucase(qTitles.indexletter)#</a>
        <cfif asc('W') neq linkLetter>|</cfif>
        <cfset linkLetter = ++LinkLetter>
    </cfif>
</cfoutput>

<ul>
<cfset currentLetter = "">
<cfoutput query="qTitles" group="title">
<cfif currentLetter neq #qTitles.indexletter#>
    <li><a name="#ucase(qTitles.indexletter)#">#ucase(qTitles.indexletter)#</a></li>
</cfif>
<cfset currentLetter = #qTitles.indexletter#>
<li><a href="#url#">#title#</a></li>
</cfoutput>
</ul>

Этот вопрос был опубликован довольно давно, но теперь доступен ванильный JavaScript-плагин с открытым исходным кодом, который будет фильтровать в алфавитном порядке любой список HTML с алфавитной навигацией.

Он называется AlphaListNav.js.

Просто выведите свой HTML-список (в вашем случае ваш список сгенерирован с помощью Coldfusion:

<ul id="myList">
  <li>Eggplant</li>
  <li>Apples</li>
  <li>Carrots</li>
  <li>Blueberries</li>  
</ul>

Добавьте CSS в <head> вашей страницы:

<link rel="stylesheet" href="alphaListNav.css">
<!-- note: you can edit/overide the css to customize how you want it to look -->

Добавьте файл JavaScript непосредственно перед закрывающим тегом </body>:

<script src="alphaListNav.js"></script>

А затем инициализируйте библиотеку AlphaListNav в своем списке, передав ей идентификатор вашего списка. Вот так:

<script>
    new AlphaListNav('myList');
</script>

Он имеет множество различных опций для настройки поведения, которое вы можете захотеть:

Например:

<script>
  new AlphaListNav('myList', {
    initLetter: 'A',
    includeAll: false,
    includeNums: false,
    removeDisabled: true,
    //and many other options available..
  });
</script>

Проект GitHub находится здесь

И пример CodePen здесь

Веб-сайт и документация AlphaListNav.js находятся здесь