2014-11-19 3 views
0

Не знаете, почему обратный вызов jsonp не возвращается клиенту.Как получить jquery autocomplete для работы с Express и Mongo

accountcontrol.js

exports.find = function(req, res) { 
var b=req.query.q; 
    db.collection('catData').find({ wrapperType : "titles", titleTitles : new RegExp(b)}).limit(5).toArray(function (err, results) { 
     if(results) { 

     res.type('application/json');   
     res.jsonp(results);    

     } else { 
      console.log("No Results") 

     } 
    }) 
} 

app.js

app.get('/operations/autocompletehome', ensureLoggedIn('/login'), function(request, response) { 

response.render('autocompletehome', { title: 'Autocomplete' }); 

}); 

app.get('/operations/autocomplete', accountcontrol.find) 

autocompletehome.jade

doctype html 
html(lang="en") 
    head 
    meta(charset="utf-8") 
    title jQuery UI Autocomplete - Remote JSONP datasource 
    link(rel="stylesheet", href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css") 
    script(src="//code.jquery.com/jquery-1.10.2.js") 
    script(src="//code.jquery.com/ui/1.11.2/jquery-ui.js") 
    script(src="/javascripts/autocomplete.js") 
    link(rel="stylesheet", href="/stylesheets/newstyle.css") 
style 
    .ui-autocomplete-loading {background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;} 
    #city { width: 25em; } 
.ui-widget 
    label(for="city") Your city: 
    input#city(type="text") 
    | Powered by 
    a(href="http://dog.org") dog.org 
    .ui-widget(style="margin-top:2em; font-family:Arial") 
    | Result: 
    #log.ui-widget-content(style="height: 200px; width: 300px; overflow: auto;") 

autocomplete.js

$(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

$("#city").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: "/operations/autocomplete", 
     dataType: "jsonp", 
     data: { 
     q: request.term 
     }, 

     success: function(data) { 
     response(data); 
     console.log('success', data); 
     }, 
     complete: function() { 
     console.log('done'); 
    } 

    }); 
    }, 
    minLength: 3, 
    select: function(event, ui) { 
    log(ui.item ? 
     "Selected: " + ui.item.label : 
     "Nothing selected, input was " + this.value); 
    }, 
    open: function() { 
    $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
    $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 
    }); 

console.log в браузере

success [ 
Object 
_id: "546c6b509c97a9880d2b29db" 
titleTitles: "06image.com" 
titlesEmail: "[email protected]" 
titlesName: "Fox" 
titlesOwner: "Dog" 
wrapperType: "titles" 
__proto__: Object 

Оказывается, что все стреляя для возвращения в браузер, за исключением.

ответ

0

Вот ответ:

Изменен формат JSON из JSONP в обоих autocomplete.js и app.js

В autocomplete.js Заменить:

success: function(data) { 
    response(data); 
    console.log('success', data); 
    }, 

С:

success: function(data) { 
     response($.map(data, function(item) { 
        return { 
         label: item.titleTitles 

        }; 
       })); 
     }, 

Позволяет JQuery анализировать массив Mongo. Надеюсь, это поможет другим, кто ворует с Jade, Mongo и Express, пытаясь научиться реализовывать Ajax.

Смежные вопросы