Jquery Auto-Complete code from JSON array

Question

I am trying to write a custom autocomplete piece for a form, where once you start typing, the suggestions show under the input field. as you type the options get more and more specific. The options are being fed by a JSON array, dynamically created by a mysql query to the database.

Upon clicking on one of the listed options, the click action should fill the input value with the value of the clicked element on the list.

For some reason, I seem to have an issue with the click jquery action on the list of options.

Can someone please look at this source code and help me figure out why is it that it is not working?

I created simplified version of this on jsfiddle.net and it worked, once I put my full code in there it breaks!.

+++++++++++++++++++++++++++

    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    var partsArray = [
    {"label": "0030200-08"}, 
    {"label": "005-2060-6"}, 
    {"label": "005-2063-5"}, 
    {"label": "005-2067-1"}, 
    {"label": "005-2078-3"}, 
    {"label": "005-2119-8"}, 
    {"label": "0062260-16"}, 
    {"label": "007-0026-0"}, 
    {"label": "007-0028-0"}, 
    {"label": "007-0030-0"}, 
    {"label": "007-0031-0"}, 
    {"label": "007-0032-0"}, 
    {"label": "007-0033-0"}, 
    {"label": "007-0035-0"}, 
    {"label": "007-0036-0"}, 
    {"label": "007-0038-0"}, 
    {"label": "007-0039-0"}, 
    {"label": "007-0039-0"}, 
    {"label": "007-0050-0"}, 
    {"label": "007-0051-0"}, 
    {"label": "012-5060-0"}, 
    {"label": "017-0035-0"}, 
    {"label": "017-0041-0"}, 
    {"label": "017-0042-0"}, 
    {"label": "017-0074-0"}, 
    {"label": "019-2055-1"}, 
    {"label": "019-2084-3"}, 
    {"label": "019-2084-6"}, 
    {"label": "019-2099-0"}, 
    {"label": "019-2102-0"}, 
    {"label": "019-2129-2"}, 
    {"label": "019-2151-0"}, 
    {"label": "019-2239-0"}, 
    {"label": "019-2306-0"}, 
    {"label": "019-2313-6"}, 
    {"label": "019-2539-0"}, 
    {"label": "019-3124-0"}, 
    {"label": "019-5065-0"}, 
    {"label": "019-6006-0"}, 
    {"label": "019-6019-0"}, 
    {"label": "019-7042-0"}, 
    {"label": "019-7072-0"}, 
    {"label": "019-7089-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8046-0"}, 
    {"label": "019-8072-0"}, 
    {"label": "019-8073-0"}, 
    {"label": "019-8074-0"}, 
    {"label": "019-8078-0"}, 
    {"label": "019-8093-0"}, 
    {"label": "019-8094-0"}, 
    {"label": "019-8095-0"}, 
    {"label": "019-8101-0"}, 
    {"label": "023-0115-0"}, 
    {"label": "023-0122-0"}, 
    {"label": "026-0018-0"}, 
    {"label": "029-0006-0"}, 
    {"label": "029-0022-0"}, 
    {"label": "029-0097-0"}, 
    {"label": "029-0286-0"}, 
    {"label": "029-0339-0"}, 
    {"label": "029-0352-0"}, 
    {"label": "029-0362-0"}, 
    {"label": "029-0407-0"}, 
    {"label": "029-0461-0"}, 
    {"label": "029-0463-0"}, 
    {"label": "029-0681-0"}, 
    {"label": "030-0035-0"}, 
    {"label": "030-1045-2"}, 
    {"label": "030-1046-0"}, 
    {"label": "030-1107-3"}, 
    {"label": "030-2002-0"}, 
    {"label": "030-2227-2"}, 
    {"label": "030-2248-0"}, 
    {"label": "030-2295-0"}, 
    {"label": "030-2367-0"}, 
    {"label": "030-2705-0"}, 
    {"label": "031-0105-0"}, 
    {"label": "031-0106-0"}, 
    {"label": "031-0112-2"}, 
    ];
    </script>
    <style>
    li{
    list-style-type: none;
    color: #888;
    }
    li:hover{
    color: #000;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    }
    .suggestions{
    display: block;
    position: relative;
    width: 120px;
    height: auto;
    border: 1px solid #aaa;
    background: #CCC;
    left: 3px;
    }
    </style>
    </head>
    <body>
    <input type="text" name="InputSpace" id="inputSpace">
        <div class="suggestionsContainer">
            <ul class="list">
        <div class="suggestions">
        </div>
            </ul>
        </div>
    <script>
    var typed;
    var a = 1;
    $("#inputSpace").keyup(function(){
        typed = $("#inputSpace").val();
            for(var x = 0; x < partsArray.length; x++){
                if(partsArray[x].label.substring(0,a) == typed){
                    $(".suggestions").append("<li name='"+partsArray[x].label+"'>"+partsArray[x].label+"</li>");
                }
                    else
                {
                    continue;
                }
             }
             a=a+1;
        });

    $("input").keypress(function(){
        $(".suggestions").html("");
    });


        $(".list li").click(function(){
            var number=$(this).attr("name");
            $("input").val(number);
        });
    </script>
    </body>
    </html>

What is the link to your fiddle?

Dave
– Dave

2014-09-05 19:04:29 +00:00
Commented Sep 5, 2014 at 19:04 — Dave
– Dave, Commented Sep 5, 2014 at 19:04
I did not save it!! :( (...Lesson learned...) sorry!...

htakeuchi
– htakeuchi

2014-09-05 19:24:47 +00:00
Commented Sep 5, 2014 at 19:24 — htakeuchi
– htakeuchi, Commented Sep 5, 2014 at 19:24

Ishaan Narula · Accepted Answer · 2014-09-05 19:16:27Z

1

        $(".list li").click(function(){
        var= number=$(this).attr("name");
        $("input").val(number);

In above lines you added var = number = ... . I think you should write it in following way,

 var number=$(this).attr("name");

remove "=" sign between 'var' and 'number'.

May be , it can solve your problem .

answered Sep 5, 2014 at 19:16

Ishaan Narula

1331 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DeFeNdog Over a year ago

Good catch on the typo

htakeuchi Over a year ago

I noticed that little detail a couple minutes ago and modified it as well... No dice !!! thanks for the observation!

Ishaan Narula Over a year ago

If you will find any solution for this on your own then dont forget to post it, so i can be able use your code.

htakeuchi Over a year ago

Absolutely!... So far... no luck!. I think it is in fact coming from the JSON array call... But still trying to debug.

htakeuchi · Accepted Answer · 2014-09-10 18:11:17Z

0

So... After so much trial and error... I figured it out!!

The answer rests under nesting a new function for the li inside the suggestions class.

$(".suggestions").click(function(){
    $("li").click(function(){
        var name = $(this).html();
        $("#inputSpace").val(name);
    })
});

This in exchange takes the value of the list item and replaces the input value with it.!!

What a headache! but there it is!!! Thanks you everyone for your suggestions and your assistance!

answered Sep 10, 2014 at 18:11

htakeuchi

193 bronze badges

Comments

DeFeNdog · Accepted Answer · 2014-09-10 19:24:58Z

0

I made a revision to my answer. I've made some minor style tweaks to your code. Most importantly, I replaced the CDN version of jQuery because it was throwing an error. I tested it locally and it worked perfectly. Always remember to check the console in your browser dev tools.

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var partsArray = [
            {"label": "0030200-08"}, 
            {"label": "005-2060-6"}, 
            {"label": "005-2063-5"}, 
            {"label": "005-2067-1"}, 
            {"label": "005-2078-3"}, 
            {"label": "005-2119-8"}, 
            {"label": "0062260-16"}, 
            {"label": "007-0026-0"}, 
            {"label": "007-0028-0"}, 
            {"label": "007-0030-0"}, 
            {"label": "007-0031-0"}, 
            {"label": "007-0032-0"}, 
            {"label": "007-0033-0"}, 
            {"label": "007-0035-0"}, 
            {"label": "007-0036-0"}, 
            {"label": "007-0038-0"}, 
            {"label": "007-0039-0"}, 
            {"label": "007-0039-0"}, 
            {"label": "007-0050-0"}, 
            {"label": "007-0051-0"}, 
            {"label": "012-5060-0"}, 
            {"label": "017-0035-0"}, 
            {"label": "017-0041-0"}, 
            {"label": "017-0042-0"}, 
            {"label": "017-0074-0"}, 
            {"label": "019-2055-1"}, 
            {"label": "019-2084-3"}, 
            {"label": "019-2084-6"}, 
            {"label": "019-2099-0"}, 
            {"label": "019-2102-0"}, 
            {"label": "019-2129-2"}, 
            {"label": "019-2151-0"}, 
            {"label": "019-2239-0"}, 
            {"label": "019-2306-0"}, 
            {"label": "019-2313-6"}, 
            {"label": "019-2539-0"}, 
            {"label": "019-3124-0"}, 
            {"label": "019-5065-0"}, 
            {"label": "019-6006-0"}, 
            {"label": "019-6019-0"}, 
            {"label": "019-7042-0"}, 
            {"label": "019-7072-0"}, 
            {"label": "019-7089-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8046-0"}, 
            {"label": "019-8072-0"}, 
            {"label": "019-8073-0"}, 
            {"label": "019-8074-0"}, 
            {"label": "019-8078-0"}, 
            {"label": "019-8093-0"}, 
            {"label": "019-8094-0"}, 
            {"label": "019-8095-0"}, 
            {"label": "019-8101-0"}, 
            {"label": "023-0115-0"}, 
            {"label": "023-0122-0"}, 
            {"label": "026-0018-0"}, 
            {"label": "029-0006-0"}, 
            {"label": "029-0022-0"}, 
            {"label": "029-0097-0"}, 
            {"label": "029-0286-0"}, 
            {"label": "029-0339-0"}, 
            {"label": "029-0352-0"}, 
            {"label": "029-0362-0"}, 
            {"label": "029-0407-0"}, 
            {"label": "029-0461-0"}, 
            {"label": "029-0463-0"}, 
            {"label": "029-0681-0"}, 
            {"label": "030-0035-0"}, 
            {"label": "030-1045-2"}, 
            {"label": "030-1046-0"}, 
            {"label": "030-1107-3"}, 
            {"label": "030-2002-0"}, 
            {"label": "030-2227-2"}, 
            {"label": "030-2248-0"}, 
            {"label": "030-2295-0"}, 
            {"label": "030-2367-0"}, 
            {"label": "030-2705-0"}, 
            {"label": "031-0105-0"}, 
            {"label": "031-0106-0"}, 
            {"label": "031-0112-2"}, 
    ];

    var typed;
    var a = 1;

    $("#inputSpace").keyup(function(){

            typed = $("#inputSpace").val();

            var i = 0;
            for(var x = 0; x < partsArray.length; x++){

                    if ( partsArray[x].label.substring(0,a) == typed ) {
                            $(".suggestions").append("<li name='"+partsArray[i].label+"'>"+partsArray[x].label+"</li>");
                    }

            }
            i++;
            a=a+1;

    });

    $("input").keypress(function(){
            $(".suggestions").html("");
    });

    $(".list").on( "click", "li", function() {
        var indexNum = $(this).attr("name");
        $("#inputSpace").val(indexNum);
    });

</script>
</body>
</html>

edited Sep 10, 2014 at 19:24

answered Sep 5, 2014 at 19:07

DeFeNdog

1,2081 gold badge14 silver badges26 bronze badges

8 Comments

htakeuchi Over a year ago

I just tried what you mentioned here, unfortunately I am getting the same behaviour. I am experiencing one of those Code-Induced Brain farts!! I know the concept is very close!! and I am very close !!! but do not seem to be able to see it!!!

DeFeNdog Over a year ago

Try appending directly to <ul class="list">? I dont advise placing DIV's inside UL tags

htakeuchi Over a year ago

minor detail with the suggestion class not expanding, but the behaviour continues on the list items not triggering on click. Thanks for your super quick responses! I really appreciate it!

htakeuchi Over a year ago

Still no success... If someone figures this out... Please post!

htakeuchi Over a year ago

I have copied your code and played with it... for some reason it seems not to identify the li tags even when I put a class or an id. I am at a loss! I have had similar projects with tasks where you create an unordered list and I have been able to call the value of that li to be used for different purposes.. not sure why this is just not working!!

|

Collectives™ on Stack Overflow

Jquery Auto-Complete code from JSON array

3 Answers 3

4 Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related