Scroll up and down with arrow key on

The problem is that i want the to scroll with the keyboard keys but it doesn't work. so I want to get the scroll with li element and scroll to it's position. And I can't make it work.

enter image description here

<div class="col-md-7 col-sm-7 col-md-offset-4 col-xs-12 city-item--add">  

                  <div class="quickSearchContainer" >

                      <input id="autocomplete" name="query" placeholder="Add More Currency" class="searchfield" type="search" autocomplete="off">

                      <div class="quickSearchDiv">

                            <ul class="quickSearch" >

                                <?php

                                   if (count($currencies) > 1) {

            $dd = 0; 

            foreach ($currencies as $row) {

                if($row->currency_standard==1 or $row->currency_standard==2){

                $dd++;

                ?>

                <li tabindex="<?php echo $dd ?>" class="data <?php if ($dd == 1) {

                    echo 'selected';

                } ?>" >

                    <a tabindex='-1'  href='javascript:void(0);' onclick="dispSelection('<?php echo strtolower($row->country_slug); ?>')">

                        <span id="country" >

                            <span id="city" ><?php echo $row->currency_full_name ?></span>

                            <img alt="<?php echo $row->country_name; ?>" height="20" width="20"  src="<?php echo base_url('uploads/flags/16x16/' . strtolower($row->country_code) . '.png'); ?>">

                        </span>

                        <span id="region"> 

                <?php if ($row->currency_name) { ?>

                    <?php echo $row->currency_name ?> &nbsp;&nbsp;-&nbsp;&nbsp;

                <?php } ?>

                <?php echo $row->country_name ?>

                            <span id="cityname"><?php echo strtolower($row->country_slug); ?></span>

                        </span> 

                    </a></li>

                <?php $city = '';

                $code = '';

                }}}

            ?>  

                            </ul>   

        </div>  

             </div>  

                  </div>

JS code

 $("#autocomplete").keydown(function (e) { 

               var valued='';

              $(".quickSearch li:first").addClass('');

                var selected = $(".quickSearch .selected"); 

                if (e.keyCode == 38) { // up

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.prev().length == 0) {

                        $(".quickSearch li:last").addClass("selected");

                     valued= $(".quickSearch li:last").find('#city').html()

                    } else {

                        selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

               document.getElementById("autocomplete").value =valued.trim();

                }

                if (e.keyCode == 40) { // down

                    var selected = $(".quickSearch .selected");

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.next().length == 0) {

                        $(".quickSearch li:first").addClass("selected");

                     valued= $(".quickSearch li:first").find('#city').html()

                    } else {

                        selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

                      document.getElementById("autocomplete").value =valued.trim();

                }

            });

when pressing the up and down keys selected class working but the ul li with the results isn't scrolling.

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

asked Nov 22 '18 at 7:08

M.Javid

407

Did my answer work for you ?

– Nandita Arora Sharma
Nov 27 '18 at 9:43

yes it working for me but when i want to try to scroll the page start to scroll i was lat of try to solve but unable after tired I decide this idea was left check on this page there is not working timehubzone.com/currencies/personal

– M.Javid
Nov 27 '18 at 17:10

Try after removing tabindex=-1 and href="javascript:void(0);" from the anchors

– Nandita Arora Sharma
Nov 29 '18 at 5:43

add a comment |

The problem is that i want the to scroll with the keyboard keys but it doesn't work. so I want to get the scroll with li element and scroll to it's position. And I can't make it work.

enter image description here

<div class="col-md-7 col-sm-7 col-md-offset-4 col-xs-12 city-item--add">  

                  <div class="quickSearchContainer" >

                      <input id="autocomplete" name="query" placeholder="Add More Currency" class="searchfield" type="search" autocomplete="off">

                      <div class="quickSearchDiv">

                            <ul class="quickSearch" >

                                <?php

                                   if (count($currencies) > 1) {

            $dd = 0; 

            foreach ($currencies as $row) {

                if($row->currency_standard==1 or $row->currency_standard==2){

                $dd++;

                ?>

                <li tabindex="<?php echo $dd ?>" class="data <?php if ($dd == 1) {

                    echo 'selected';

                } ?>" >

                    <a tabindex='-1'  href='javascript:void(0);' onclick="dispSelection('<?php echo strtolower($row->country_slug); ?>')">

                        <span id="country" >

                            <span id="city" ><?php echo $row->currency_full_name ?></span>

                            <img alt="<?php echo $row->country_name; ?>" height="20" width="20"  src="<?php echo base_url('uploads/flags/16x16/' . strtolower($row->country_code) . '.png'); ?>">

                        </span>

                        <span id="region"> 

                <?php if ($row->currency_name) { ?>

                    <?php echo $row->currency_name ?> &nbsp;&nbsp;-&nbsp;&nbsp;

                <?php } ?>

                <?php echo $row->country_name ?>

                            <span id="cityname"><?php echo strtolower($row->country_slug); ?></span>

                        </span> 

                    </a></li>

                <?php $city = '';

                $code = '';

                }}}

            ?>  

                            </ul>   

        </div>  

             </div>  

                  </div>

JS code

 $("#autocomplete").keydown(function (e) { 

               var valued='';

              $(".quickSearch li:first").addClass('');

                var selected = $(".quickSearch .selected"); 

                if (e.keyCode == 38) { // up

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.prev().length == 0) {

                        $(".quickSearch li:last").addClass("selected");

                     valued= $(".quickSearch li:last").find('#city').html()

                    } else {

                        selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

               document.getElementById("autocomplete").value =valued.trim();

                }

                if (e.keyCode == 40) { // down

                    var selected = $(".quickSearch .selected");

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.next().length == 0) {

                        $(".quickSearch li:first").addClass("selected");

                     valued= $(".quickSearch li:first").find('#city').html()

                    } else {

                        selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

                      document.getElementById("autocomplete").value =valued.trim();

                }

            });

when pressing the up and down keys selected class working but the ul li with the results isn't scrolling.

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

asked Nov 22 '18 at 7:08

M.Javid

407

Did my answer work for you ?

– Nandita Arora Sharma
Nov 27 '18 at 9:43

yes it working for me but when i want to try to scroll the page start to scroll i was lat of try to solve but unable after tired I decide this idea was left check on this page there is not working timehubzone.com/currencies/personal

– M.Javid
Nov 27 '18 at 17:10

Try after removing tabindex=-1 and href="javascript:void(0);" from the anchors

– Nandita Arora Sharma
Nov 29 '18 at 5:43

add a comment |

The problem is that i want the to scroll with the keyboard keys but it doesn't work. so I want to get the scroll with li element and scroll to it's position. And I can't make it work.

enter image description here

<div class="col-md-7 col-sm-7 col-md-offset-4 col-xs-12 city-item--add">  

                  <div class="quickSearchContainer" >

                      <input id="autocomplete" name="query" placeholder="Add More Currency" class="searchfield" type="search" autocomplete="off">

                      <div class="quickSearchDiv">

                            <ul class="quickSearch" >

                                <?php

                                   if (count($currencies) > 1) {

            $dd = 0; 

            foreach ($currencies as $row) {

                if($row->currency_standard==1 or $row->currency_standard==2){

                $dd++;

                ?>

                <li tabindex="<?php echo $dd ?>" class="data <?php if ($dd == 1) {

                    echo 'selected';

                } ?>" >

                    <a tabindex='-1'  href='javascript:void(0);' onclick="dispSelection('<?php echo strtolower($row->country_slug); ?>')">

                        <span id="country" >

                            <span id="city" ><?php echo $row->currency_full_name ?></span>

                            <img alt="<?php echo $row->country_name; ?>" height="20" width="20"  src="<?php echo base_url('uploads/flags/16x16/' . strtolower($row->country_code) . '.png'); ?>">

                        </span>

                        <span id="region"> 

                <?php if ($row->currency_name) { ?>

                    <?php echo $row->currency_name ?> &nbsp;&nbsp;-&nbsp;&nbsp;

                <?php } ?>

                <?php echo $row->country_name ?>

                            <span id="cityname"><?php echo strtolower($row->country_slug); ?></span>

                        </span> 

                    </a></li>

                <?php $city = '';

                $code = '';

                }}}

            ?>  

                            </ul>   

        </div>  

             </div>  

                  </div>

JS code

 $("#autocomplete").keydown(function (e) { 

               var valued='';

              $(".quickSearch li:first").addClass('');

                var selected = $(".quickSearch .selected"); 

                if (e.keyCode == 38) { // up

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.prev().length == 0) {

                        $(".quickSearch li:last").addClass("selected");

                     valued= $(".quickSearch li:last").find('#city').html()

                    } else {

                        selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

               document.getElementById("autocomplete").value =valued.trim();

                }

                if (e.keyCode == 40) { // down

                    var selected = $(".quickSearch .selected");

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.next().length == 0) {

                        $(".quickSearch li:first").addClass("selected");

                     valued= $(".quickSearch li:first").find('#city').html()

                    } else {

                        selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

                      document.getElementById("autocomplete").value =valued.trim();

                }

            });

when pressing the up and down keys selected class working but the ul li with the results isn't scrolling.

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

asked Nov 22 '18 at 7:08

M.Javid

407

The problem is that i want the to scroll with the keyboard keys but it doesn't work. so I want to get the scroll with li element and scroll to it's position. And I can't make it work.

enter image description here

<div class="col-md-7 col-sm-7 col-md-offset-4 col-xs-12 city-item--add">  

                  <div class="quickSearchContainer" >

                      <input id="autocomplete" name="query" placeholder="Add More Currency" class="searchfield" type="search" autocomplete="off">

                      <div class="quickSearchDiv">

                            <ul class="quickSearch" >

                                <?php

                                   if (count($currencies) > 1) {

            $dd = 0; 

            foreach ($currencies as $row) {

                if($row->currency_standard==1 or $row->currency_standard==2){

                $dd++;

                ?>

                <li tabindex="<?php echo $dd ?>" class="data <?php if ($dd == 1) {

                    echo 'selected';

                } ?>" >

                    <a tabindex='-1'  href='javascript:void(0);' onclick="dispSelection('<?php echo strtolower($row->country_slug); ?>')">

                        <span id="country" >

                            <span id="city" ><?php echo $row->currency_full_name ?></span>

                            <img alt="<?php echo $row->country_name; ?>" height="20" width="20"  src="<?php echo base_url('uploads/flags/16x16/' . strtolower($row->country_code) . '.png'); ?>">

                        </span>

                        <span id="region"> 

                <?php if ($row->currency_name) { ?>

                    <?php echo $row->currency_name ?> &nbsp;&nbsp;-&nbsp;&nbsp;

                <?php } ?>

                <?php echo $row->country_name ?>

                            <span id="cityname"><?php echo strtolower($row->country_slug); ?></span>

                        </span> 

                    </a></li>

                <?php $city = '';

                $code = '';

                }}}

            ?>  

                            </ul>   

        </div>  

             </div>  

                  </div>

JS code

 $("#autocomplete").keydown(function (e) { 

               var valued='';

              $(".quickSearch li:first").addClass('');

                var selected = $(".quickSearch .selected"); 

                if (e.keyCode == 38) { // up

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.prev().length == 0) {

                        $(".quickSearch li:last").addClass("selected");

                     valued= $(".quickSearch li:last").find('#city').html()

                    } else {

                        selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

               document.getElementById("autocomplete").value =valued.trim();

                }

                if (e.keyCode == 40) { // down

                    var selected = $(".quickSearch .selected");

                    $(".quickSearch .selected").removeClass("selected");

                    if (selected.next().length == 0) {

                        $(".quickSearch li:first").addClass("selected");

                     valued= $(".quickSearch li:first").find('#city').html()

                    } else {

                        selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

                    } 

                      document.getElementById("autocomplete").value =valued.trim();

                }

            });

when pressing the up and down keys selected class working but the ul li with the results isn't scrolling.

javascript jquery html scroll

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

asked Nov 22 '18 at 7:08

M.Javid

407

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

asked Nov 22 '18 at 7:08

M.Javid

407

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

edited Nov 22 '18 at 8:12

wanttobeprofessional

1,01731323

asked Nov 22 '18 at 7:08

M.Javid

407

asked Nov 22 '18 at 7:08

M.Javid

407

asked Nov 22 '18 at 7:08

M.Javid

407

Did my answer work for you ?

– Nandita Arora Sharma
Nov 27 '18 at 9:43

yes it working for me but when i want to try to scroll the page start to scroll i was lat of try to solve but unable after tired I decide this idea was left check on this page there is not working timehubzone.com/currencies/personal

– M.Javid
Nov 27 '18 at 17:10

Try after removing tabindex=-1 and href="javascript:void(0);" from the anchors

– Nandita Arora Sharma
Nov 29 '18 at 5:43

add a comment |

Did my answer work for you ?

– Nandita Arora Sharma
Nov 27 '18 at 9:43

yes it working for me but when i want to try to scroll the page start to scroll i was lat of try to solve but unable after tired I decide this idea was left check on this page there is not working timehubzone.com/currencies/personal

– M.Javid
Nov 27 '18 at 17:10

Try after removing tabindex=-1 and href="javascript:void(0);" from the anchors

– Nandita Arora Sharma
Nov 29 '18 at 5:43

Did my answer work for you ?

– Nandita Arora Sharma
Nov 27 '18 at 9:43

yes it working for me but when i want to try to scroll the page start to scroll i was lat of try to solve but unable after tired I decide this idea was left check on this page there is not working timehubzone.com/currencies/personal

– M.Javid
Nov 27 '18 at 17:10

Try after removing tabindex=-1 and href="javascript:void(0);" from the anchors

– Nandita Arora Sharma
Nov 29 '18 at 5:43

add a comment |

1 Answer
1

active

oldest

votes

Try getting focus on the element that gets selected. It will automatically scroll it in view if not already present.

$(".quickSearch").find(".selected a")[0].focus()

Call the above line in function as shown below

$("#autocomplete").keydown(function (e) { 

  var valued='';

  $(".quickSearch li:first").addClass('');

    var selected = $(".quickSearch .selected"); 

    if (e.keyCode == 38) { // up

        $(".quickSearch .selected").removeClass("selected");

        if (selected.prev().length == 0) {

            $(".quickSearch li:last").addClass("selected");

          valued= $(".quickSearch li:last").find('#city').html()

        } else {

            selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

    document.getElementById("autocomplete").value =valued.trim();

    }

    if (e.keyCode == 40) { // down

        var selected = $(".quickSearch .selected");

        $(".quickSearch .selected").removeClass("selected");

        if (selected.next().length == 0) {

            $(".quickSearch li:first").addClass("selected");

          valued= $(".quickSearch li:first").find('#city').html()

        } else {

            selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

          document.getElementById("autocomplete").value =valued.trim();

    }

    $(".quickSearch").find(".selected a")[0].focus()

});

edited Nov 22 '18 at 8:59

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

it working but scroll the page, not on ul li

– M.Javid
Nov 22 '18 at 7:31

Try my updated answer. Change the line to $(".quickSearch").find(".selected a")[0].focus()

– Nandita Arora Sharma
Nov 22 '18 at 9:00

Please try this as well if the above doesnt work $(".quickSearch").find(".selected a")[0].scrollIntoView();

– Nandita Arora Sharma
Nov 22 '18 at 9:03

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425547%2fscroll-up-and-down-with-arrow-key-on-ul-li%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Try getting focus on the element that gets selected. It will automatically scroll it in view if not already present.

$(".quickSearch").find(".selected a")[0].focus()

Call the above line in function as shown below

$("#autocomplete").keydown(function (e) { 

  var valued='';

  $(".quickSearch li:first").addClass('');

    var selected = $(".quickSearch .selected"); 

    if (e.keyCode == 38) { // up

        $(".quickSearch .selected").removeClass("selected");

        if (selected.prev().length == 0) {

            $(".quickSearch li:last").addClass("selected");

          valued= $(".quickSearch li:last").find('#city').html()

        } else {

            selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

    document.getElementById("autocomplete").value =valued.trim();

    }

    if (e.keyCode == 40) { // down

        var selected = $(".quickSearch .selected");

        $(".quickSearch .selected").removeClass("selected");

        if (selected.next().length == 0) {

            $(".quickSearch li:first").addClass("selected");

          valued= $(".quickSearch li:first").find('#city').html()

        } else {

            selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

          document.getElementById("autocomplete").value =valued.trim();

    }

    $(".quickSearch").find(".selected a")[0].focus()

});

edited Nov 22 '18 at 8:59

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

it working but scroll the page, not on ul li

– M.Javid
Nov 22 '18 at 7:31

Try my updated answer. Change the line to $(".quickSearch").find(".selected a")[0].focus()

– Nandita Arora Sharma
Nov 22 '18 at 9:00

Please try this as well if the above doesnt work $(".quickSearch").find(".selected a")[0].scrollIntoView();

– Nandita Arora Sharma
Nov 22 '18 at 9:03

add a comment |

Try getting focus on the element that gets selected. It will automatically scroll it in view if not already present.

$(".quickSearch").find(".selected a")[0].focus()

Call the above line in function as shown below

$("#autocomplete").keydown(function (e) { 

  var valued='';

  $(".quickSearch li:first").addClass('');

    var selected = $(".quickSearch .selected"); 

    if (e.keyCode == 38) { // up

        $(".quickSearch .selected").removeClass("selected");

        if (selected.prev().length == 0) {

            $(".quickSearch li:last").addClass("selected");

          valued= $(".quickSearch li:last").find('#city').html()

        } else {

            selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

    document.getElementById("autocomplete").value =valued.trim();

    }

    if (e.keyCode == 40) { // down

        var selected = $(".quickSearch .selected");

        $(".quickSearch .selected").removeClass("selected");

        if (selected.next().length == 0) {

            $(".quickSearch li:first").addClass("selected");

          valued= $(".quickSearch li:first").find('#city').html()

        } else {

            selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

          document.getElementById("autocomplete").value =valued.trim();

    }

    $(".quickSearch").find(".selected a")[0].focus()

});

edited Nov 22 '18 at 8:59

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

it working but scroll the page, not on ul li

– M.Javid
Nov 22 '18 at 7:31

Try my updated answer. Change the line to $(".quickSearch").find(".selected a")[0].focus()

– Nandita Arora Sharma
Nov 22 '18 at 9:00

Please try this as well if the above doesnt work $(".quickSearch").find(".selected a")[0].scrollIntoView();

– Nandita Arora Sharma
Nov 22 '18 at 9:03

add a comment |

Try getting focus on the element that gets selected. It will automatically scroll it in view if not already present.

$(".quickSearch").find(".selected a")[0].focus()

Call the above line in function as shown below

$("#autocomplete").keydown(function (e) { 

  var valued='';

  $(".quickSearch li:first").addClass('');

    var selected = $(".quickSearch .selected"); 

    if (e.keyCode == 38) { // up

        $(".quickSearch .selected").removeClass("selected");

        if (selected.prev().length == 0) {

            $(".quickSearch li:last").addClass("selected");

          valued= $(".quickSearch li:last").find('#city').html()

        } else {

            selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

    document.getElementById("autocomplete").value =valued.trim();

    }

    if (e.keyCode == 40) { // down

        var selected = $(".quickSearch .selected");

        $(".quickSearch .selected").removeClass("selected");

        if (selected.next().length == 0) {

            $(".quickSearch li:first").addClass("selected");

          valued= $(".quickSearch li:first").find('#city').html()

        } else {

            selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

          document.getElementById("autocomplete").value =valued.trim();

    }

    $(".quickSearch").find(".selected a")[0].focus()

});

edited Nov 22 '18 at 8:59

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

Try getting focus on the element that gets selected. It will automatically scroll it in view if not already present.

$(".quickSearch").find(".selected a")[0].focus()

Call the above line in function as shown below

$("#autocomplete").keydown(function (e) { 

  var valued='';

  $(".quickSearch li:first").addClass('');

    var selected = $(".quickSearch .selected"); 

    if (e.keyCode == 38) { // up

        $(".quickSearch .selected").removeClass("selected");

        if (selected.prev().length == 0) {

            $(".quickSearch li:last").addClass("selected");

          valued= $(".quickSearch li:last").find('#city').html()

        } else {

            selected.prev().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

    document.getElementById("autocomplete").value =valued.trim();

    }

    if (e.keyCode == 40) { // down

        var selected = $(".quickSearch .selected");

        $(".quickSearch .selected").removeClass("selected");

        if (selected.next().length == 0) {

            $(".quickSearch li:first").addClass("selected");

          valued= $(".quickSearch li:first").find('#city').html()

        } else {

            selected.next().addClass("selected");

            valued= $(".quickSearch .selected").find('#city').html().trim();

        } 

          document.getElementById("autocomplete").value =valued.trim();

    }

    $(".quickSearch").find(".selected a")[0].focus()

});

edited Nov 22 '18 at 8:59

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

edited Nov 22 '18 at 8:59

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

answered Nov 22 '18 at 7:26

Nandita Arora Sharma

9,4732618

it working but scroll the page, not on ul li

– M.Javid
Nov 22 '18 at 7:31

Try my updated answer. Change the line to $(".quickSearch").find(".selected a")[0].focus()

– Nandita Arora Sharma
Nov 22 '18 at 9:00

Please try this as well if the above doesnt work $(".quickSearch").find(".selected a")[0].scrollIntoView();

– Nandita Arora Sharma
Nov 22 '18 at 9:03

add a comment |

it working but scroll the page, not on ul li

– M.Javid
Nov 22 '18 at 7:31

Try my updated answer. Change the line to $(".quickSearch").find(".selected a")[0].focus()

– Nandita Arora Sharma
Nov 22 '18 at 9:00

Please try this as well if the above doesnt work $(".quickSearch").find(".selected a")[0].scrollIntoView();

– Nandita Arora Sharma
Nov 22 '18 at 9:03

it working but scroll the page, not on ul li

– M.Javid
Nov 22 '18 at 7:31

Try my updated answer. Change the line to $(".quickSearch").find(".selected a")[0].focus()

– Nandita Arora Sharma
Nov 22 '18 at 9:00

Please try this as well if the above doesnt work $(".quickSearch").find(".selected a")[0].scrollIntoView();

– Nandita Arora Sharma
Nov 22 '18 at 9:03

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg