jquery autocomplete

[funbinod]

i'm trying to work with jquery autocomplete using 'jquery.js' & 'jquery.autocomplete.js'.

 

everything is working fine. but when i press 'Enter' after selecting one of the results it gives, i cant find where the pointer reaches. what i expect it is if i press 'Enter' then i want it to select (or focus) that same or next input field.

 

in jquery.autocomplete.js file there is something written for the 'Enter' button

	$input	.keydown(function(e) {		// track last key pressed		lastKeyPressCode = e.keyCode;		switch(e.keyCode) {// ................// ................			case 13: // return				if( selectCurrent() ){					// make sure to blur off the current field					$input.get(0).blur();					e.preventDefault();				}				break;// ................// ................		}	}) 

but i cant understand what it is doing and what to change to make it do what i expect.

 

can anybody please guide...?????

 

thanks in advance...

[funbinod]

ok! this main problem is solved.

 

i just commented the .blur() line and the problem is solved.

case 13: // return                if( selectCurrent() ){                    // make sure to blur off the current field//                    $input.get(0).blur();                    e.preventDefault();                }                break;

but i've got another problem.

if there is no matching found it gives php errors. i just want to avoid the process if no matching found.

 

this is my php code that autocomplete gets result from..

//item.php<?phprequire_once('function.php');$q = strtolower($_REQUEST["q"]);if (!$q) return;$query = mysqli_query($connect, "select item from stock where item like '%$q%' order by item");while ($item = mysqli_fetch_array($query)) {	$items [] = $item['item'];}foreach ($items as $key) {	if (strpos(strtolower($key), $q) !== false) {		echo "$keyn";	}}?>

if it doesn't find match it gives error

 

<b>Notice</b>: Undefined variable: items in <b>E:xampphtdocsacitem.php</b> on line <b>12</b><br />

please suggest.....

[justsomeguy]

Initialize $items as an empty array.

[funbinod]

did u mean doing this ---

$items = array();while ($item = mysqli_fetch_array($query)) {	if (mysqli_num_rows($query) > 0) {	$items [] = $item['item'];}}foreach ($items as $key) {	if (strpos(strtolower($key), $q) !== false) {		echo "$keyn";	}}

if so there is nothing change in the result

[justsomeguy]

You're saying you do that and it still tells you that $items is an undefined variable? I find that hard to believe.

[funbinod]

sorry sorry!!

i think there was something error in browser or it didn't reload the edited script.

it is working as wished now. thank u

 

but one problem more

 

it is still not alerting "Not Found"

// this is inside the main script where i populate the autocomplete items  function findValue(li) {  	if( li == null ) return alert("Not Found!");  	if( !!li.extra ) var sValue = li.extra[0];  	else var sValue = li.selectValue;  }

[justsomeguy]

If that is not alerting "Not Found", then that means li is not null. You can use console.log to see what it is.

[funbinod]

  function findValue(li) {  	if( li == null ) return alert("Not Found!");  	if( !!li.extra ) var sValue = li.extra[0];  	else var sValue = li.selectValue;	console.log(findValue(li));  }

logging nothing.......

[justsomeguy]

Put it before the return. A return statement ends the function.

[funbinod]

  function findValue(li) {  	if( li == null )	console.log(findValue(li));	return alert("Not Found!");  	if( !!li.extra ) var sValue = li.extra[0];  	else var sValue = li.selectValue;  }

still nothing....

[L8V2L]

 

  function findValue(li) {  	if( li == null )	console.log(findValue(li));	return alert("Not Found!");  	if( !!li.extra ) var sValue = li.extra[0];  	else var sValue = li.selectValue;  }

still nothing....

Try this:

"use strict";function findValue(li) {"use strict";  var result;  var sValue;    if( li == null ){       //result = (findValue(li)); //<= stack limite reach    alert("Not Found!");     }  else if( !!li.extra ){    sValue = li.extra[0];   result = sValue;  }  else{     sValue = li.selectValue;     result = sValue;}  return(result);}findValue(); // alert => Not Found!

Edited July 3, 2014 by L8V2L

[justsomeguy]

I wasn't suggesting to log findValue(li), I was suggesting to log li. The point is to check what li is set to, understand?

  function findValue(li) {        console.log(li);  	if( li == null ) return alert("Not Found!");  	if( !!li.extra ) var sValue = li.extra[0];  	else var sValue = li.selectValue;  }

[funbinod]

Try this:

"use strict";function findValue(li) {"use strict";  var result;  var sValue;    if( li == null ){       //result = (findValue(li)); //<= stack limite reach    alert("Not Found!");     }  else if( !!li.extra ){    sValue = li.extra[0];   result = sValue;  }  else{     sValue = li.selectValue;     result = sValue;}  return(result);}findValue(); // alert => Not Found!

 

it is alerting "Not Found!" only when the page loads. but not if there is no match

 

///////////////////////////////////////////

 

I wasn't suggesting to log findValue(li), I was suggesting to log li. The point is to check what li is set to, understand?

  function findValue(li) {        console.log(li);  	if( li == null ) return alert("Not Found!");  	if( !!li.extra ) var sValue = li.extra[0];  	else var sValue = li.selectValue;  }

 

its still the same....

[L8V2L]

it is alerting "Not Found!" only when the page loads. but not if there is no match /////////////////////////////////////////// its still the same....

Give me the value in the variable to work with, so I can imitate what you are trying to do.

[funbinod]

Give me the value in the variable to work with, so I can imitate what you are trying to do.

 

 

i will give u the whole script

i'm using "jquery.js" and "jquery.autocomplete.js" for the whole process..

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>test autocomplete</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="ajax/jquery.js"></script><script type="text/javascript" src="ajax/jquery.autocomplete.js"></script><link rel="stylesheet" href="style.css" type="text/css" />	</head><body><form onsubmit="return false;" action="">	<p>		<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>		<input type="button" onclick="lookupAjax();" value="Get Value"/>	</p></form><script type="text/javascript">"use strict";function findValue(li) {"use strict";  var result;  var sValue;    if( li == null ){       //result = (findValue(li)); //<= stack limite reach    alert("Not Found!");     }  else if( !!li.extra ){    sValue = li.extra[0];   result = sValue;  }  else{     sValue = li.selectValue;     result = sValue;}  return(result);}findValue(); // alert => Not Found!  function selectItem(li) {    	findValue(li);  }  function formatItem(row) {    	return row[0] + " (id: " + row[1] + ")";  }  function lookupAjax(){  	var oSuggest = $("#CityAjax")[0].autocompleter;    oSuggest.findValue();  	return false;  }  function lookupLocal(){    	var oSuggest = $("#CityLocal")[0].autocompleter;    	oSuggest.findValue();    	return false;  }        $("#CityAjax").autocomplete(      "autocomplete.php",      {  			delay:10,  			minChars:1,  			matchSubset:1,  			matchContains:1,  			cacheLength:10,  			onItemSelect:selectItem,  			onFindValue:findValue,  			formatItem:formatItem,  			autoFill:true  		}    );  </script></body></html>

// this is the list for the autocomplete data<?php$q = strtolower($_GET["q"]);if (!$q) return;$items = array("Narayangadh","Kathmandu","Pokhara","Hetaunda",Besisahar");foreach ($items as $key=>$value) {	if (strpos(strtolower($key), $q) !== false) {		echo "$key|$valuen";	}}?>

[L8V2L]

From what I can tell

var nul = null;//nullvar nu0;//undefinedvar num = 0;var t = "truthy value";var f = "";  function findValue(li) {  var sValue;        console.log(li);  	if( !li ){ console.log("Not Found!" + " " + li); alert("Not Found!" + " " + li);}  	else if( !!li.extra ){ var sValue = li.extra[0];        }        else{ var sValue = li.selectValue;        } // console.log(sValue);  }findValue(f);findValue(t);findValue(num);findValue(nu0);//errorfindValue(nul);//error/*  function findValue(li) {        console.log(li);  	if( li == null ){ return alert("Not Found!");}  	if( !!li.extra ){ var sValue = li.extra[0];      }        else{ var sValue = li.selectValue;}  *//*  function findValue(li) {  var sValue;        console.log(li);  	if( li==null||undefined){ return(alert("Not Found!"));}  	else if( !!li.extra ){ var sValue = li.extra[0];        }        else{ var sValue = li.selectValue;        }  console.log(sValue);  }*//*  function findValue(li) {        console.log(li);  	if( li == null ){ return alert("Not Found!");}  	if( !!li.extra ){ var sValue = li.extra[0];      }        else{ var sValue = li.selectValue;}  */

Initialize it with a empty string In php if it don't have a value on return period.Make sure you have your console open. I'm on my phone looking over this in a emulator.And you did look at the code I gave you properly; take out the invoke findValue(); part.Then try it again with that code.If don't work, edit this one to be put in place of that one. Edited July 4, 2014 by L8V2L

[funbinod]

thank u again for another reply.

but i understood only a less. with that less idea, i read the console logging (with alerts) this -

 

-------------------------------------------

this is the log on the console

-------------------------------------------

Not found! : 31

truthy value : 29

0 : 29

Not found! 0 : 31

undefined : 29

Not found! undefined : 31

null : 29

Not found! null : 31

 

but what i wonder is all alerts are happening just after page loads. it doesn't wait for me to try some characters in the autocomplete field...

Edited July 4, 2014 by funbinod

[L8V2L]

thank u again for another reply.but i understood only a less. with that less idea, i read the console logging (with alerts) this - ------------------------------------------- this is the log on the console------------------------------------------- Not found! : 31 truthy value : 29 0 : 29 Not found! 0 : 31 undefined : 29 Not found! undefined : 31 null : 29 Not found! null : 31 but what i wonder is all alerts are happening just after page loads. it doesn't wait for me to try some characters in the autocomplete field...

Do you have

findValue();

any where in the page? This will cause an invoke of it by the page.I really don't know what else to tell you but to go to this page: http://www.w3schools.com/ajax/ajax_aspphp.aspSadly I'm still a beginner myself. Edited July 4, 2014 by L8V2L

[funbinod]

i just notied that, the 'Not Found!' alert is displayed onClick the button Get Value.

		<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>		<input type="button" onclick="lookupAjax();" value="Get Value"/>

but i wish this alert while typing.. i tried "onKeyUp" and "onBlur" and "onChange" in the "CityAjax" input, but it didn't work. can u find any idea??

[L8V2L]

i just notied that, the 'Not Found!' alert is displayed onClick the button Get Value.

		<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>		<input type="button" onclick="lookupAjax();" value="Get Value"/>

but i wish this alert while typing.. i tried "onKeyUp" and "onBlur" and "onChange" in the "CityAjax" input, but it didn't work. can u find any idea??

Try it in JavaScript. Get the element by tag or id and connect the on lick button to it.

[justsomeguy]

<input type="button" onclick="lookupAjax();" value="Get Value"/>

You're not passing any value to the function, so of course the parameter is going to be undefined.