Jump to content

JS Autocomplete : escaping characters to protect JS code and searching from any position in a string


phdphd

Recommended Posts

Hi All,

 

I have found an interesting autocomplete js code at http://hscripts.com/scripts/JavaScript/autocomplete-form.php

that works without jQuery and grabs data from a php array.

 

I managed to have the data extracted from a database first and I am using the following piece of PHP code inside the JS suggestions variable to feed this variable :

 $tmp = Array();
    foreach($tab as $k=>$v)
		{
		
		$tmp[] = '"'.addslashes($v).'"'; 
		 
		}
		
echo join(',', $tmp);

I use addslashes because I noticed that the autocomplete does not work if one of the retreived words contains a double-quote.

 

Is this enough to protect JS coding ?

 

I also would like to make this JS code search for the typed characters at any position in the strings (not just from the beginning). Is this feasible ?

 

Thanks!

 

PS/ I also made the JS case insensitive by applying the following tip : http://www.vonloesch.de/node/18#comment-2832

 

Link to comment
Share on other sites

Is this enough to protect JS coding ?

No, use json_encode when outputting information to javascript.

 

I also would like to make this JS code search for the typed characters at any position in the strings (not just from the beginning). Is this feasible ?

Change the getWord function so that rather than searching a prefix, it search a substring. To do this you need to use the string.indexOf method.

Link to comment
Share on other sites

Thanks for your answer. I managed to solve it, but still have 2 problems after having implemented case-insensitiveness.

 

The getWord function now looks as follows :

function getWord(beginning)
{
  var words = new Array();
  for (var i=0;i < suggestions.length; ++i)
   {
    var j = -1;
    var correct = 1;
    while (correct == 1 && ++j < beginning.length)
    {
	
	if (suggestions[i].indexOf(beginning.toLowerCase()) === -1)
		{
		if (suggestions[i].indexOf(beginning.toUpperCase()) === -1)
		correct = 0;
		}


	}
    if (correct == 1)
       words[words.length] = suggestions[i];
	   
	   
  }

	return words;

}   

Assuming the "suggestions" are ["Hello","World","Hello World","hELLO"], the issues are :

 

1. Any string representing 2 beginning letters, whatever their case, will match no results. For example, "HE", "He", "hE", "he" do not match "Hello", neither "hELLO", nor "Hello World", whereas "lLo" will match the three of them.

 

2. " w" and " W" will match "Hello World", but "o W" will not.

 

Any idea of how to solve these issues ? Thanks!

Link to comment
Share on other sites

I nearly found the solution by replacing the while loop contents with the following

    var str1 = suggestions[i];
    var str2 = beginning;
    var str2 = str2.replace(/\*/g, "");
    var re = new RegExp(str2,"i");
    if (str1.search(re) == -1) {
    correct = 0;
    }


However there is still an issue with the * character. If the user types "*", all the suggestions are displayed.

 

Without the line "var str2 = str2.replace(/\*/g, "");", If the user types "*" no suggestion is displayed, but if they type any character followed by "*", then all the suggestions are displayed.

 

I also noticed some similar issues with the use of "?".

 

What I want is to avoid the displaying of all the suggestions if wildcards are typed, or to have them processed as normal characters.

 

Thanks for your help.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.