Jump to content
funbinod

jquery autocomplete

Recommended Posts

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...

Share this post


Link to post
Share on other sites

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.....

Share this post


Link to post
Share on other sites

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

:(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;  }

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
  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....... :(

Share this post


Link to post
Share on other sites
  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.... :(

Share this post


Link to post
Share on other sites

 

  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 by L8V2L

Share this post


Link to post
Share on other sites

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;  }

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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";	}}?>

Share this post


Link to post
Share on other sites

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 by L8V2L

Share this post


Link to post
Share on other sites

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 by funbinod

Share this post


Link to post
Share on other sites

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 by L8V2L

Share this post


Link to post
Share on other sites

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??

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
<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.

Share this post


Link to post
Share on other sites

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.   Paste as plain text instead

  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.

Loading...

×
×
  • Create New...