B bikic Medlem sedan juni 2006 261 inlägg Frågan 26 nov. 2012 10:40 #1 Hej alla!
Användaren Laktek har skapat en fantastisk autocomplete med många inbyggda funktioner. Du kan läsa mer om det här:
http://www.laktek.com/2011/03/03/introducing-jquery-smart-autocomplete/
Jag behöver er hjälp med en sak:
Laktek har gjort det enkelt med sina exempel. Han har bland annat skapat ett exempel där man hämtar data från en fil med hjälp av Json. Datan i filen ser då ut enligt följande:
["Niklas", "Ludde", "Olle"]
osv...
Jag har gjort om filen lite grann så den ser ut så här:
[
{"url":http://www.google.se,"name":"Niklas"},
{"url":http://www.google.se,"name":"Ludde"},
{"url":http://www.google.se,"name":"Olle"}
]
Vad jag vill är att man med hjälp av filter och resultFormatter ska kunna söka efter "name" , men presentera "name" som en klickbar länk med "URL" som den faktiska länken.
resultFormatter skulle kunna se ut så här:
resultFormatter: function(result){
[INDENT]return '<li><a href="' + result.url + '">" + result.name + '</a></li>'[/INDENT]
}
Jag har suttit och trixat i ett par dagar nu men får det inte till att fungera.
Någon vänlig själ som vill hjälpa mig?
Mvh Niklas
Vad har du försökt med filter?
fick igång det mer eller mindre direkt om man följde guiden på sidan: http://jsfiddle.net/voigtan/BpzPT/1/
$("input").smartAutoComplete({
source: [
{"url":"http://www.google.se","name":"Niklas"},
{"url":"http://www.google.se","name":"Ludde"},
{"url":"http://www.google.se","name":"Olle"}
],
resultFormatter: function(result){
return '<li><a href="' + result.url + '">' + result.name + '</a></li>';
},
filter: function(term, source){
var filtered_and_sorted_list = $.map(source, function(item) {
var score = item.name.toLowerCase().score(term.toLowerCase());
if(score > 0) {
return { 'result': item, 'value': score }
}
}).sort(function(a, b){ return b.value - a.value });
return $.map(filtered_and_sorted_list, function(item){
return item.result;
});
}
});
B bikic Medlem sedan juni 2006 261 inlägg Märkligt!
Tack, du använder quicksilverpluginet, det hade jag missat ;)
Men det är ändå något som inte stämmer när man klickar på länken i dropdownlistan. Den triggas inte. Vad kan det bero på?
bikic skrev:
Märkligt!
Tack, du använder quicksilverpluginet, det hade jag missat ;)
Men det är ändå något som inte stämmer när man klickar på länken i dropdownlistan. Den triggas inte. Vad kan det bero på?
du missade även att avsluta strängar.
Min gissning är att det finns ett click event som körs och stoppar default eventet på dina a-element.
B bikic Medlem sedan juni 2006 261 inlägg Ok,
läste något på Github om en IE bug som inte gjorde länkarna klickbara, men det skulle vara uppdaterat i den senaste filen.
Jag får allt att fungera nu, men inte när jag har source via en fil - som returnerar exakt samma värde.
har du dom-ready runt din kod, ligger din js kod efter elementet du vill binda plugin:et på? inte lätt att utgå ifrån vad du gör för fel om du inte berätta vad du gör och vad som inte fungera.
du skall kunna binda/kolla på eventet 'itemSelect' för nu binds den på mousedown eventet.
B bikic Medlem sedan juni 2006 261 inlägg Min kod ser ut så här och ligger emellan en massa annan kod:
<script type="text/javascript" src="/jQuery/AutoComplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/jQuery/AutoComplete/qs_score.js"></script>
<script type="text/javascript" src="/jQuery/jquery.page.kundservice.js"></script>
<div id="csform">
<input texttype="text" id="searchQuery" autocomplete="off" class="cs"><br>
<ul id="results"></ul>
</div>
jquery.page.kundservice.js ser ut enligt följande:
$(document).ready(function() {
$("#searchQuery").smartAutoComplete({
source: [
{"url":"http://www.google.se/","name":"Niklas"},
{"url":"http://www.google.se/","name":"Olle"}
],
resultsContainer: "ul#results",
resultFormatter: function(result){
return '<li><a href="' + result.url + '">' + result.name + '</a></li>';
},
filter: function(term, source){
var filtered_and_sorted_list = $.map(source, function(item) {
var score = item.name.toLowerCase().score(term.toLowerCase());
if(score > 0) {
return { 'result': item, 'value': score }
}
}).sort(function(a, b){ return b.value - a.value });
return $.map(filtered_and_sorted_list, function(item){
return item.result;
});
},
forceSelect: true,
maxResults: 5,
delay: 0,
minCharLimit: 1
});
$("#searchQuery").bind({
keyIn: function(){
$(this).smartAutoComplete().clearResults();
},
noResults: function(ev){
$("ul#results").html("Vi hittar dessvärre inget som matchar med det du söker på.");
ev.preventDefault();
}
});
});
