6
Bir Google App Engine projesinde typeahead.js kullanıyorum ve prefetch kullanarak sorun yaşıyorum.typeahead.js prefetch sorunları
Yerel kullandığımda typeahead iyi çalışır, ancak aynı veri kümesini bir json dosyasına kopyalayıp prefetch kullanırsanız, typeahead çalışmaz, yani hiçbir öneri görüntülenmez.
[{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'}]
: Burada
<!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>
<!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>
Burada ön alma kullanarak kod benim sürümü:
Burada yerel kullanarak kod benim sürümü Sorun, Chrome ve Firefox'ta gerçekleşir. Kromda hata ayıklama, example.json dosyasının sunulduğunu ve alındığını görebiliyorum. Örnek.json için ağ etkinliğinin önizlemesi ve yanıtı, dosyanın içeriğini bütünüyle gösterir. Ancak, krom hata ayıklayıcının kaynaklar bölümünde, Yerel Depolama alanı boş. Sadece bu mesajı
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
hiçbir konsol hataları, ben alanları arası sorunlarınız değilim ve this post göre, ben 0 olarak ttl kurdum ve sorun yine devam ederse this post ile ilgili olarak vardır.
Herhangi bir yardım için teşekkür ederiz. @NitzanShaked gelen öneriye cevap olarak
- GÜNCELLEME * Bazı konsol günlüğü eklendi.
İlk önce bunu denedim ve hiçbir şey konsolda kayıtlı değil.
$(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,
});
});
Sonra bu çalıştı: Ben
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
deneyin değil belirterek '(sizin durumunuzda' "örnek" ') önceden getirme veri kümesi için name', sadece yerel depolama getirilen olmadığından emin olmak için. –
@NitzanShaked öneri için teşekkürler. Bunu denedim ama fark yaratmadı – rusty1042
Bir 'filter 'ekleyin ve parametreyi yazdırmak için' console.log'unu kullanın. Bunun mantıklı olduğunu gör. Bunu yaparsa, çalıştığını görmek için kukla bir Datum'u "filtreden" döndürmeyi deneyin. –