Jump to content

Autocomplete Arrow Key Scroll

demeritrious

By demeritrious
in Javascript Help

 Share

Recommended Posts

demeritrious Member

demeritrious

Posted
Posted

I have a working autocomplete which connects to my database using ajax. I am trying to include a function where the user can scroll through the results list using the up/down arrow keys. All of the suggestions I found in google basically broke my autocomplete and yes I've installed the latest Jquery.

 

Also, for some reason the user has to click the upper half of the search result in order for the data to display otherwise it won't register for some reason any ideas about that?

 

Any help would be greatly appreciated. Thanks

 

 

<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
 
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;    
});
 
jQuery("#result").live("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
var yourLinkHref= $(this).attr('href');
    window.location = "mainpage.php?TopicName=" + $name;
});
jQuery(document).live("click", function(e) { 
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut(); 
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
 
});
</script>
Link to comment
https://forums.phpfreaks.com/topic/289868-autocomplete-arrow-key-scroll/
Share on other sites
demeritrious Member

demeritrious

Posted
  • Author
Posted

Thank you for responding. I've notice the autocomplete works if you click in the space around the text, but if you click the text it would generate a null value. very strange

 

A part of my html that is related to this

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
 
 
 
<div id="pagewrap">
 
<!---Header--->
 
<div id="header">
<div align="right">Welcome <?php echo $_SESSION['MM_Username']; ?> </div>
<img src="images/HomeBackgound.jpg" alt="" width="100%" height="50" />
 
<!--Autocomplete-->
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search For Topics" />
<div id="result">
</div>
</div>

 

And the CSS for the autocomplete

 

 

<style type="text/css">
body{ 
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
 
}
.content{
width:auto;
margin:0 auto;
}
#searchid
{
width:200px;
font-size:14px;
}
#result
{
position:absolute;
width:200px;
display:none;
margin-top:-1px;
border-top:0px;
border:1px #CCC solid;
background-color: white;
z-index:1;
}
.show
{
border-bottom:1px #999 dashed;
font-size:14px;
padding:4px;
width:auto;
 
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
</style>
hansford Member

hansford

Posted
Posted (edited)

I had to change a few things to get the code working on my system, so incorporate what you need into your current code.

<?php

session_start();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;

}
.content{
width:auto;
margin:0 auto;
}
#searchid
{
width:200px;
font-size:14px;
}
#result
{
position:absolute;
width:200px;
display:block;
margin-top:-1px;
border-top:0px;
border:1px #CCC solid;
background-color: white;
z-index:1;
}
.show
{
border-bottom:1px #999 dashed;
font-size:14px;
padding:4px;
width:auto;

}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}

.selected-hint
{
background-color:#E2E1E1;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">


<script type="text/javascript">
$(function(){
$(".search").keyup(function(e)
{

// don't want keyup to fire if we are scrolling
if(e.which == 38 || e.which == 40) {

	 return false;
}
var searchid = $(this).val();
var dataString = 'search='+ searchid;

if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
dataType: "json",
data: dataString,
cache: false,
success: function(html)
{

  for(var i in html) {

	  $("#result").append('<div>' + html[i] + '<div>');
  }

$("#result").show();
}
});
}return false;
}).keydown(function(e) {

// check if result div is visible
var visible = $('#result').is(':visible');

var key = e.which;

    // down arrow
    if(key == 40) {

        if(visible) {

            if($('#result div.selected-hint').length == 0) {

                var child = $('#result div:nth-child(1)');
                child.addClass('selected-hint');
            }
            else {

                if($('#result div.selected-hint').next('div').length) {

                    $('#result div.selected-hint').removeClass('selected-hint').next('div').addClass('selected-hint');
                }
                else {

                    $('#result div.selected-hint').removeClass('selected-hint');

                }
            }

        }
    }
    // up arrow
    if(key == 38) {

		if(visible) {

			if($('#result div.selected-hint').prev('div').length) {

				$('#result div.selected-hint').removeClass('selected-hint').prev('div').addClass('selected-hint');

			}
			else {

				$('#result div.selected-hint').removeClass('selected-hint');

			}
	    }
    }
});

jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
var yourLinkHref= $(this).attr('href');
    //window.location = "mainpage.php?TopicName=" + $name;
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});

});
</script>
</head>



<div id="pagewrap">

<!---Header--->

<div id="header">
<div align="right">Welcome <?php if(isset($_SESSION['MM_Username'])) { echo $_SESSION['MM_Username']; } ?> </div>
<img src="images/HomeBackgound.jpg" alt="" width="100%" height="50" />

<!--Autocomplete-->
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search For Topics" />
<div id="result">
</div>
</div>

 

 

Edited by hansford
hansford Member

hansford

Posted
Posted

Also, if you're returning results (plural) you need to return an array to ajax so that's why I used the dataType "json" in the ajax call.

The php would need to return the results as a json array like so.

<?php

$args = array('result1','result2','result3');

echo json_encode($args);

 
demeritrious Member

demeritrious

Posted
  • Author
Posted

Thank you very much!

Without meaning to sound greedy is there a way that the user can press enter to select the autocomplete as if they selected it with their mouse. I was wondering why you included json I've never used it before. It seems to work without the JSON and loads a little slower if I include "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js". I don't know why. 

Also, I still cannot figure out why theres a null value if I select the text of the result but words just find if I select the area around the text. Any idea?

 

Here is the code that worked for me:

 

Jquery

 

<script type="text/javascript">
$(function(){
$(".search").keyup(function(e)
{
 
// don't want keyup to fire if we are scrolling
if(e.which == 38 || e.which == 40) {
 
return false;
}
var searchid = $(this).val();
var dataString = 'search='+ searchid;
 
 
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
datatype: "json",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
}).keydown(function(e) {
 
// check if result div is visible
var visible = $('#result').is(':visible');
 
var key = e.which;
 
    // down arrow
    if(key == 40) {
 
        if(visible) {
 
            if($('#result div.selected-hint').length == 0) {
 
                var child = $('#result div:nth-child(1)');
                child.addClass('selected-hint');
            }
            else {
 
                if($('#result div.selected-hint').next('div').length) {
 
                    $('#result div.selected-hint').removeClass('selected-hint').next('div').addClass('selected-hint');
                }
                else {
 
                    $('#result div.selected-hint').removeClass('selected-hint');
 
                }
            }
 
        }
    }
    // up arrow
    if(key == 38) {
 
if(visible) {
 
if($('#result div.selected-hint').prev('div').length) {
 
$('#result div.selected-hint').removeClass('selected-hint').prev('div').addClass('selected-hint');
 
}
else {
 
$('#result div.selected-hint').removeClass('selected-hint');
 
}
   }
    }
});
 
jQuery("#result").live("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
var yourLinkHref= $(this).attr('href');
    window.location = "mainpage.php?TopicName=" + $name;
});
 
jQuery(document).live("click", function(e) { 
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut(); 
}
});
 
 
});
</script>

 

CSS

 

<style type="text/css">
body{ 
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
 
}
.content{
width:auto;
margin:0 auto;
}
#searchid
{
width:200px;
font-size:14px;
}
#result
{
position:absolute;
width:200px;
display:none;
margin-top:-1px;
border-top:0px;
border:1px #CCC solid;
background-color: white;
z-index:1;
}
.show
{
border-bottom:1px #999 dashed;
font-size:14px;
padding:4px;
width:auto;
 
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
 
.selected-hint
{
background-color:#E2E1E1;
}
</style>
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.

×
 Share
Go to topic listing
×
×
  • 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.