Announcement

Collapse
No announcement yet.

Jquery AutoComplete Results, Make Form Submit On-Click

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Jquery AutoComplete Results, Make Form Submit On-Click

    Has anyone taken the Power Search AutoComplete from Bill's example and actually make the results submit the form upon being clicked? Right now, when you click on a result, it only fills in the form, but I'd like it to submit on that click.

    Here's the script that was provided as part of the how-to. What would need to be added?


    HTML Code:
     <script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function() {
        $("#searchinput").keyup(function() {
            $.getJSON("/mm5/merchant.mvc?Store_Code=XXXXX&Screen=AUTO1&", {
                autoletter: $(this).val()
            }, function(j) {
                if (!j) {
                    document.getElementById("suggestions").hidden = true;
                } else {
                    document.getElementById("suggestions").hidden = false;
                }
                var options = '<select class="searchcomplete" size="' + j.length + '" onclick="Picked(this.value)">';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].term + '">' + j[i].term + '</option>';
                }
                options += '</select>';
                $("#suggestions").html(options);
                $('#suggestions option:first').attr('selected', 'selected');
            })
        })
        $("#searchfield").keyup(function() {
            $.getJSON("/mm5/merchant.mvc?Store_Code=XXXXX&Screen=AUTO2&", {
                autoletter: $(this).val()
            }, function(j) {
                if (!j) {
                    document.getElementById("topsuggestions").hidden = true;
                } else {
                    document.getElementById("topsuggestions").hidden = false;
                }
                var options = '<select size="' + j.length + '" onclick="TopPicked(this.value)">';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].term + '">' + j[i].term + '</option>';
                }
                options += '</select>';
                $("#topsuggestions").html(options);
                $('#topsuggestions option:first').attr('selected', 'selected');
            })
        })
    })
    </script>
    <script type="text/javascript">
        function Picked(opt) {
            document.getElementById("searchinput").value = opt;
            document.getElementById("suggestions").hidden = true;
    }
    </script>
    <script type="text/javascript">
        function TopPicked(opt) {
            document.getElementById("searchfield").value = opt;
            document.getElementById("topsuggestions").hidden = true;
        }
    </script>
    Last edited by aarcmedia; 01-19-16, 01:03 PM.
    Ted Hust
    AarcMediaGroup.com

    Celebrating 13 Years of Outstanding Service & Support
    Miva Merchant Design

    #2
    I'm only bumping this because I realized I didn't wrap the code in the html tag to make it viewable, so thinking that maybe was the reason I got no replies. I suspect the other reason I got no replies is because no one knows :)
    Ted Hust
    AarcMediaGroup.com

    Celebrating 13 Years of Outstanding Service & Support
    Miva Merchant Design

    Comment

    Working...
    X