jquery and javascript problem.

The following code work properly in html.


<div id="suggestions" align="center">

function getSuggestions(value){
if(value != ""){
$.post("suggestion.php",{suggestionPart:value},function(data){
$("#suggestions").html(data);
});
}
}

<input type="text" id="searchfield" class="inputtext" name="searchfield" onKeyUp="getSuggestions(this.value);" value="" />

But it does not work in javascript. i would like to echo it in javascript code. i have mentioned it as below.


SearchField 
written by Alen Grakalic, provided by Css Globe 

this.searchfield = function(){

// CONFIG 

// this is id of the search field you want to add this script to. 
// You can use your own id just make sure that it matches the search field in your html file.
var id = "searchfield";

// Text you want to set as a default value of your search field.
var defaultText = "Search the word...";

// set to either true or false
// when set to true it will generate search suggestions list for search field based on content of variable below
var suggestion = true;

// static list of suggestion options, separated by comma
// replace with your own

var suggestionText = " <div id="suggestions" align="center"> ";

// END CONFIG (do not edit below this line, well unless you really, really want to change something :) )

// Peace, 
// Alen

var field = document.getElementById(id);
var classInactive = "sf_inactive";
var classActive = "sf_active";
var classText = "sf_text";
var classSuggestion = "sf_suggestion";
this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
if(field && !safari){
field.value = defaultText;
field.c = field.className;
field.className = field.c + " " + classInactive;
field.onfocus = function(){
this.className = this.c + " " + classActive;
this.value = (this.value == "" || this.value == defaultText) ? "" : this.value;
};
field.onblur = function(){
this.className = (this.value != "" && this.value != defaultText) ? this.c + " " + classText : this.c + " " + classInactive;
this.value = (this.value != "" && this.value != defaultText) ? this.value : defaultText;
clearList();
};
if (suggestion){

var selectedIndex = 0;

field.setAttribute("autocomplete", "off");
var div = document.createElement("div");
var list = document.createElement("ul");
list.style.display = "none";
div.className = classSuggestion;
list.style.width = field.offsetWidth + "px";
div.appendChild(list);
field.parentNode.appendChild(div);

field.onkeypress = function(e){

var key = getKeyCode(e);

if(key == 13){ // enter
selectList();
selectedIndex = 0;
return false;
};
};

field.onkeyup = function(e){

var key = getKeyCode(e);

switch(key){
case 13:
return false;
break;
case 27: // esc
field.value = "";
selectedIndex = 0;
clearList();
break;
case 38: // up
navList("up");
break;
case 40: // down
navList("down");
break;
default:
startList();
break;
};
};

this.startList = function(){
var arr = getListItems(field.value);
if(field.value.length > 0){
createList(arr);
} else {
clearList();
};
};

this.getListItems = function(value){
var arr = new Array();
var src = suggestionText;
var src = src.replace(/, /g, ",");
var arrSrc = src.split(",");
for(i=0;i<arrSrc.length;i++){
if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
arr.push(arrSrc[i]);
};
};
return arr;
};

this.createList = function(arr){
resetList();
if(arr.length > 0) {
for(i=0;i<arr.length;i++){
li = document.createElement("li");
a = document.createElement("a");
a.href = "javascript:void(0);";
a.i = i+1;
a.innerHTML = arr[i];
li.i = i+1;
li.onmouseover = function(){
navListItem(this.i);
};
a.onmousedown = function(){
selectedIndex = this.i;
selectList(this.i);
return false;
};
li.appendChild(a);
list.setAttribute("tabindex", "-1");
list.appendChild(li);
};
list.style.display = "block";
} else {
clearList();
};
};

this.resetList = function(){
var li = list.getElementsByTagName("li");
var len = li.length;
for(var i=0;i<len;i++){
list.removeChild(li[0]);
};
};

this.navList = function(dir){
selectedIndex += (dir == "down") ? 1 : -1;
li = list.getElementsByTagName("li");
if (selectedIndex < 1) selectedIndex = li.length;
if (selectedIndex > li.length) selectedIndex = 1;
navListItem(selectedIndex);
};

this.navListItem = function(index){
selectedIndex = index;
li = list.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
};
};

this.selectList = function(){
li = list.getElementsByTagName("li");
a = li[selectedIndex-1].getElementsByTagName("a")[0];
field.value = a.innerHTML;
clearList();
};

};
};

this.clearList = function(){
if(list){
list.style.display = "none";
selectedIndex = 0;
};
};
this.getKeyCode = function(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
return code;
};

};

// script initiates on page load. 

this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",searchfield);

any volunteer plz help me.

jquery and javascript problem.

javascript problem

phplearner

daveVk

phplearner

Fotiman

daveVk

phplearner

daveVk

phplearner

Fotiman

daveVk

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week