Submit data from textbox OR Jquery autocomplete menu

老子叫甜甜 提交于 2020-04-17 22:15:47

问题


I have a jquery autocomplete menu for book searches. The autocomplete is working fine, but I would still like the option of doing a search query (POST data) from the text typed in the text box, by pressing enter, and ignoring the autocomplete suggestions.

I've tried jquery form submit, which always disables the autocomplete menu. I'm not sure what to do.

Below is the code I have now with the autocomplete which is working.

<!DOCTYPE html>
<html>
<head>

<!-- Your web-app is https, so your scripts need to be too -->

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css">

<script type="text/javascript">

    function post(path, params, method ='post') {

        // The rest of this code assumes you are not using a library.
        // It can be made less wordy if you use one.
        const form = document.createElement('form');
        form.method = method;
        form.action = path;

        for (const key in params) {
            if (params.hasOwnProperty(key)) {
                const hiddenField = document.createElement('input');
                hiddenField.type = 'hidden';
                hiddenField.name = key;
                hiddenField.value = params[key];

                form.appendChild(hiddenField);
            }
        }

        document.body.appendChild(form);
        form.submit();
    }

    $(document).ready(function() {



        $("#findBook").autocomplete({

            minLength: 0,
            scroll: true,

            source: function (request, response) {



                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "https://www.googleapis.com/books/v1/volumes?q=" + request.term,


                    success: function (data) {

                        var transformed = data.items.map(function (book) {
                            return {
                                title: book.volumeInfo.title,
                                author: book.volumeInfo.authors,
                                image: book.volumeInfo.imageLinks.thumbnail
                            };
                        });


                        response(transformed.slice(0, 5));
                    }


                });


            },


            select: function(event, ui){

               //console.log(ui.title);


                event.preventDefault();

                var id = ui.item.title;

                $.ajax({
                    url: "/book_profile_b/" + id,
                    type: "POST",
                    dataType: 'html',
                    data: { id: id },
                    success: function(data){


                        post('/book_profile_b/'+id);


                    },
                    error: function (xhr, ajaxOptions, thrownError) {

                        console.log(xhr.responseText+" - "+thrownError)
                        alert("ERROR:" + xhr.responseText+" - "+thrownError);
                    }
                });



            },


        }).autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li></li>")

                .data("item.autocomplete", item)
                .append("<a><img class= 'imageClass' src='" + item.image + "' />" + item.title +  " " + "<div class=searchInfo>" +  "by" + " " + item.author + "</div>" + "</a>")
                .appendTo(ul)
                .append('<li><a href="/book_profile/b/'+ this.term + '">Search: '+ this.term + '</a></li>' );



           };

        });

</script>





<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="/style.css" type="text/css">
<link rel="stylesheet" href="/home.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|EB+Garamond|Encode+Sans+Expanded|Inconsolata|Karla|Manuale|Nunito+Sans|Pontano+Sans|Roboto+Slab:300|Rokkitt|Sanchez" rel="stylesheet">
</head>
<body>






<div class="searchBook">


    <input type="text" placeholder="Search.." id="findBook" />


</div>





</body>
</html>

来源:https://stackoverflow.com/questions/60960731/submit-data-from-textbox-or-jquery-autocomplete-menu

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!