Autosuggest search box met cookie

Status
Niet open voor verdere reacties.
D

Deparis

Gebruiker
Lid geworden
18 apr 2013
Berichten
80
Hi,

Ik ben een tijd bezig geweest, om de waarde die een gebruiker invult in een search box, op te slaan in een cookie zodat bij een volgende search deze vorige zoekopdrachten weer beschikbaar zijn.
Marktplaats maakt daar ondermeer gebruik van.

Ik kom maar niet verder met het opslaan van de zoekwaardes in een cookie. Deze moet de vorm hebben van: "blauw","bruin","groen","geel" (deze zijn nu hardcoded).

cookies schijnt het aanhalingsteken niet te accepteren.
Weet iemand hoe dit toch voor elkaar te krijgen?

mijn test pagina is: http://nedfile.nl/test/index.html
 
Kan je jouw code even laten zien hier? Dan kunnen we er ook een blik op werpen.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cookie test</title>

<script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript" src="autocomplete.js"></script> 

<script type="text/javascript" src="jquery.cookie.js"></script> 

<link rel="stylesheet" href="autocomplete.css"> 

</head>

<body>

<div align="center" style="padding-top:100px">

<form action="index.html" method="post" onsubmit="myFunction()">
<table width="20%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input id="basics" /></td>
    <td><input type="submit" class="button"  style="padding:4px 10px;" name="submit" value="submit" ></td>
  </tr>
</table>
</form>


<div style="padding-top:150px"><button onclick="show()">show cookie</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="dell()">verwijder cookie</button></div>

<script type="text/javascript">
var options = {
	data: ["blauw", "groen", "bruin", "rood", "geel"],
	highlightPhrase: false
};

$("#basics").easyAutocomplete(options);


function show(){
  if (typeof $.cookie('myCookie') === 'undefined'){
   alert("geen cookie");
} else {
   alert( $.cookie("myCookie") );
}
  }
 
 
function dell(){
  $.removeCookie("myCookie");
  }
  
function myFunction(){
  
  $.cookie('myCookie', $("#basics").val());
 }
  
</script>

</div>
</body>
</html>

Ik zat te denken of het ook wellicht met een php cookie zou kunnen lukken.
 
Cookies zijn cookies, of je ze nu met PHP, JavaScript of welke taal dan ook aanmaakt, het is resultaat is hetzelfde.
 
cookies schijnt het aanhalingsteken niet te accepteren
Klik om te vergroten...
Zet " tussen '......' en het werkt.

Waarom hiervoor jQuery met een plugin gebruiken. Gewoon simpel Javascript werkt prima.
Code: 
<script>
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}
// maak cookie
createCookie('Zoekhistorie', '"blauw","bruin","groen","geel"', 365);
// lees cookie
var kleur = readCookie('Zoekhistorie');
if (kleur != null) {
    console.log(kleur); // resultaat: "blauw","bruin","groen","geel"
}
// verwijder cookie
eraseCookie('Zoekhistorie');
</script>
 
Laatst bewerkt:
Hi!
Zeer bedankt voor de snelle respons! Ik ben er de hele ochtend mee bezig geweest en heb al enig resultaat geboekt.
het vervelende is dat de autocomplete de cookiewaarde letterlijk overneemt in de dropdownlijst.

Ik krijg het niet voor elkaar om dit goed te krijgen terwijl de hardcoded lijst er exact hetzelfde uitziet en het wél goed doet.
zie: http://nedfile.nl/test/index.html

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cookie test</title>

<script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript" src="autocomplete.js"></script> 

<link rel="stylesheet" href="autocomplete.css"> 


<script type="text/javascript">

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
   return "";
}


function createCookie(name,value,days) {

if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
	var txtOne = document.getElementById('basics').value;
	
    var kleur = readCookie('Zoekhistorie');
		
	var value = '"'+txtOne+'",'+kleur; 
	
    document.cookie = name+"="+value+expires+"; path=/";

}

  
function eraseCookie() {
var name = "Zoekhistorie";
 createCookie(name,"",-1);
}

</script>

</head>

<body>

<div align="center" style="padding-top:100px">

<form action="index.html" method="post" onsubmit="createCookie('Zoekhistorie', '', 365)">
<table width="20%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input type="text" id="basics" name="zoek"/></td>
    <td><input type="submit" class="button"  style="padding:4px 10px;" name="submit" value="submit" ></td>
  </tr>
</table>
</form>


<div style="padding-top:150px"><button onclick="show()">show cookie</button>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="dell()">verwijder cookie</button></div>

<script type="text/javascript">
var kleur2 = [readCookie('Zoekhistorie')];
//var kleur = [kleur2];

var kleur = ["bruinnn","groenn",];


var options = {
	data: kleur2,
	highlightPhrase: false
};

$("#basics").easyAutocomplete(options);


function show(){
  var kleur = readCookie('Zoekhistorie');

    //console.log(kleur); // resultaat: "blauw","bruin","groen","geel"
	alert(kleur);

}
 

function dell(){
eraseCookie();
}
  
</script>

</div>
</body>
</html>
 
Laatst bewerkt:
Kan je verder met de bestanden in de bijlage.

Ik zie dat je .html gebruikt.
- bestandsnaam index.php hernoemen in index.html
- en dit ook veranderen in de html bij form, het wordt dan action="index.html"
 

Bijlagen

  • autocomplete.zip
    2,2 KB · Weergaven: 25
Laatst bewerkt:
Hi Giga bron,

Zééér bedankt voor de oplossing! je voorbeeld werkt als een trein!
Om eerlijk te zijn had ik de moed al opgegeven, vierkante ogen en platte vingers van het typen.

Nogmaals zeer bedankt! :thumb:
 
De plugin heet "easy-autocomplete" maar dat easy mogen ze wel weghalen.
Ik heb 'm al een keer eerder gebruikt voor iemand anders dus een halve oplossing had ik al liggen.
Alleen de cookies heb ik erin gebakken.

Heel graag gedaan. Het was leuk om te doen. Suc6 :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan