JQuery UI автозаполнения с ответом JSON - PullRequest
Новая
       7

JQuery UI автозаполнения с ответом JSON

2 голосов
/ 28 февраля 2011

Я попробовал Плагин Саймона Ватли для автозаполнения jQuery, но я обнаружил, что плагин ожидает, что результаты автозаполнения будут на отдельных строках, и нет необходимости в json.

Итак, я искал другие плагины, которые будут принимать json, и обнаружил jQuery UI autocomplete . В документации не так много примеров использования данных JSON. Я не могу заставить это работать с моим кодом. Я также заглянул на другие сайты за помощью, но безрезультатно.

Вот код для моего запроса: 

<cfif url.q neq ''>
    <cfset theQ = lcase(q)>

    <cfquery datasource="names" name="qry" maxrows="20">
        select top 10 id, name
        from sample
        where
        lower(name) like '#theQ#%'
        order by name
    </cfquery>

    <!---
    Before we can serialize the query, we need to convert
    it to an array of structs.
    --->
    <cfset rows = [] />

    <!--- Loop over the query to convert it. --->
    <cfloop query="qry">

    <!--- Create a row struct. --->
        <cfset row = {} />

        <!--- Add each column to our struct. --->
        <cfloop
        index="column"
        list="#qry.columnList#"
        delimiters=",">

            <cfset row[ column ] = qry[ column ][ qry.currentRow ] />

        </cfloop>

    <!--- Append the row struct to the row array. --->
        <cfset arrayAppend( rows, row ) />

    </cfloop>

    <!---
    Now that we have converted our query to an
    array of structs, we can serialize it using the
    serializeJSON() method.
    --->
    <cfset serialized=#serializeJSON(rows)#>
    <cfoutput>#serialized#</cfoutput>

</cfif>

Данные json, которые я получаю, выглядят так: 

[{"NAME":"levi","ID":7},{"NAME":"leviticus","ID":3}]

Теперь вот для автозаполнения: 

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function() {
          $("#q").autocomplete({
          source: function(request, response){
            $.post("data/country.cfm", {data:request.term}, function(data){     
              response($.map(data, function(item) {
              return {
                label: item.id,
                value: item.name
              }
              }))
            }, "json");
          },
          minLength: 2,
          dataType: "json",
          cache: false,
          focus: function(event, ui) {
            return false;
          },
          select: function(event, ui) {
             this.value = ui.item.label;
             return false;
          }
         });
       });
    </script>

В чем может быть проблема? Любая помощь, пожалуйста? Спасибо.

...