Skip to content

Instantly share code, notes, and snippets.

@neodigm
Last active December 15, 2017 03:23
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neodigm/c1c5209a25668970a4a8e8026422e309 to your computer and use it in GitHub Desktop.
Save neodigm/c1c5209a25668970a4a8e8026422e309 to your computer and use it in GitHub Desktop.
This experiment replaces legacy JQuery and JQuery typeahead plug-in with Vue.js and Axios. This script is fired manually after the page is loaded via a Chrome Snippet. The resulting solution will not require JQuery but will require promises.
/*
Optim Book Axios - New Type Ahead | SCK
Lakeside prod enter 141893 then execute this snippet
*/
$("#branding").append("<link rel='stylesheet' href='https://neodigm.github.io/is-ecom-labs/autocomplete/autocomplete.css' type='text/css' media='all' />");
$("#branding").append("<script src='https://unpkg.com/axios/dist/axios.min.js'></script>");
$("#branding").append("<script src='https://unpkg.com/vue@2.4.2/dist/vue.js'></script>");
$("#quickSearch-query").unbind().attr("v-model","ta_data");
$("#quickSearch-query").attr("v-model","ta_data");
$("#quickSearch-query").append("<div class='typhead'><ul class='typhead--ul> </ul></div>");
setInterval( assignBEMClasses, 2000);
function assignBEMClasses(){
$(".ac_results").addClass("typhead").find("ul").addClass("typhead--ul").find("li").each( function(){ $( this ).addClass("typhead--li"); });
}
setTimeout( function(){
var vTA = new Vue({
el: "#quickSearch-query",
data: {
ta_data: "",
ta_response: {}
},
watch: {
ta_data: function( e ){
console.log("WATCH | " + this.ta_data);
if( isNumeric( this.ta_data ) && (this.ta_data.length > 5)){
axios.get( 'https://www.lakeside.com/common/includes/inc_search_type_ahead.jsp?q=1418930&limit=12&timestamp=1504554461655&environment=typeAhead_queries&sort=alpha&searchFrom=&Ntt=1418930*&_=1504554389332' )
.then(function (response) {
this.ta_response = response;
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
},
methods: {
keyup: function( e ){
}
}
});
}, 6000);
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment