6
Używam pliku typeahead.js w projekcie Google App Engine i problemy z korzystaniem z pobierania wstępnego.problemy z prefetch typeahead.js
Typowy grot działa dobrze, gdy korzystam z lokalnego, ale jeśli skopiuję ten sam zestaw danych do pliku json i użyję pobierania wstępnego, to polecenie nagłówkowe nie działa, tzn. Nie są wyświetlane żadne sugestie.
Oto moja wersja kodu przy użyciu lokalny:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/hogan.js" type="text/javascript"></script>
<script src="./js/typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
local: [{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'},
{value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'},
{value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'},
{value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}],
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan
});
});
</script>
</body>
</html>
Oto moja wersja kodu używając prefetch:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/hogan.js" type="text/javascript"></script>
<script src="./js/typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
prefetch: {url: './json/example.json', ttl: '0'},
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan
});
});
</script>
</body>
</html>
Oto plik example.json:
[{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'}, {value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'}, {value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'}, {value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}]
Problem występuje w przeglądarce Chrome i Firefox. Debugowanie w chrome, widzę, że plik example.json jest obsługiwany i odbierany. Podgląd i reakcja działania sieci na przykład.json pokazuje zawartość pliku w całości. Jednak w sekcji zasobów debuggera chrome magazyn lokalny jest pusty. Nie ma żadnych błędów konsoli, właśnie ten komunikat
XHR finished loading: "http://localhost:8000/json/example.json". jquery-1.10.2.js:8706
send jquery-1.10.2.js:8706
jQuery.extend.ajax jquery-1.10.2.js:8136
jQuery.(anonymous function) jquery-1.10.2.js:8282
jQuery.extend.getJSON jquery-1.10.2.js:8265
c.mixin._loadPrefetchData typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin.initialize typeahead.min.js:7
proxy jquery-1.10.2.js:827
(anonymous function) typeahead.min.js:7
jQuery.extend.map jquery-1.10.2.js:782
g typeahead.min.js:7
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
b.initialize typeahead.min.js:7
jQuery.fn.typeahead typeahead.min.js:7
(anonymous function) prefetch.html:14
fire jquery-1.10.2.js:3048
self.fireWith jquery-1.10.2.js:3160
jQuery.extend.ready jquery-1.10.2.js:433
completed
W odniesieniu do this post, ja nie mając problemów domen i poprzecznych względem this post, mam ustawić TTL 0 i problem nadal występuje.
Każda pomoc zostanie doceniona.
- AKTUALIZACJA * W odpowiedzi na sugestię z @NitzanShaked dodałem kilka logowania konsoli.
Najpierw spróbowałem tego i nic nie zarejestrowałem w konsoli.
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
prefetch: {
url: './json/example.json',
ttl: '0',
filter: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
datum = data[i];
console.log(datum);
}
return data;
}
},
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan,
});
});
Potem próbowałem to:
$(document).ready(function(){
$('input.typeahead-example').typeahead({
name: 'example',
prefetch: {url: './json/example.json', ttl: '0'},
limit: 3,
valueKey: 'name',
template: '<p>{{value}}</p>',
engine: Hogan,
}).bind('typeahead:opened', function (obj, datum) {
console.log(obj);
console.log(datum);
console.log(datum.val2);
});
});
który spowodował konsoli zalogować następujących po kliknięciu wewnątrz pola wejściowego
jQuery.Event {type: "typeahead:opened", timeStamp: 1378502920480, jQuery1102039872112357988954: true, isTrigger: 3, namespace: ""…}
currentTarget: input.typeahead-example tt-query
data: null
delegateTarget: input.typeahead-example tt-query
handleObj: Object
isTrigger: 3
jQuery1102039872112357988954: true
namespace: ""
namespace_re: null
result: undefined
target: input.typeahead-example tt-query
timeStamp: 1378502920480
type: "typeahead:opened"
__proto__: Object
prefetch.html:22
undefined prefetch.html:23
Uncaught TypeError: Cannot read property 'val2' of undefined prefetch.html:24
(anonymous function) prefetch.html:24
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle jquery-1.10.2.js:4766
jQuery.event.trigger jquery-1.10.2.js:5007
(anonymous function) jquery-1.10.2.js:5691
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
jQuery.fn.extend.trigger jquery-1.10.2.js:5690
c.mixin.trigger typeahead.min.js:7
c.mixin._propagateEvent typeahead.min.js:7
proxy jquery-1.10.2.js:827
d.trigger typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin.open typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin._openDropdown typeahead.min.js:7
proxy jquery-1.10.2.js:827
d.trigger typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin._handleFocus typeahead.min.js:7
proxy jquery-1.10.2.js:827
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle
Spróbuj nie określać nazwy dla zestawu danych pobierania wstępnego ('" przykład "' w twoim przypadku), aby upewnić się, że nie zostanie przeniesiony z lokalnego magazynu. –
@NitzanShaked dzięki za sugestię. Próbowałem, ale nie robiłem różnicy. – rusty1042
Dodaj "filter", a następnie użyj "console.log", aby wydrukować parametr. Zobacz, że ma to sens. Jeśli tak, spróbuj zwrócić dummy Datum z 'filter' tylko po to, aby zobaczyć, że działa. –