Submit item on select INSTEAD of button click in HTML Form WP Autocomplete dropdown List

Question

Below is a script I have loaded into an HTML Form Web Part Filter. It is autopopulated with list items from a list called 'Companies'. I want the list item to be submitted upon select INSTEAD of the users having to select the item from dropdown, and then hit the 'submit' button. New to development, so thanks for being patient if this is an obvious or easy fix. Thanks for your help!

<script>  
// Settings 
var url = "https://<mydomain>/_vti_bin/listdata.svc/Companies()";  
var field = "Title";  

// Onload  
$(document).ready(function () {  
$("#mytags").autocomplete({  
    source: function (req, add) {  
        var suggestions = search(req.term, url, field);  
        add(suggestions);  
    }  
});  
});  



// Search all the listitems by using the REST Service  
// Value is the text that needs to be used in the query  
// listurl is the listdata.svc url withouth the filter params  
// field is the name of the field where the value in exists  
function search(value, listurl, field) {  
    var coll = new Array();  
    var url =  
        listurl + "?$filter=startswith(" + field + ",'" + value + "')";  

$.ajax({  
    cache: true,  
    type: "GET",  
    async: false,  
    dataType: "json",  
    url: url,  
    success: function (data) {  
        var results = data.d.results;  
        for (att in results) {  
            var object = results[att];  
            for (attt in object) {  
                if (attt == field) {  
                    coll.push(object[attt]);  
                    }  
                }  
            }  
        }  
    });  
    return coll  
}  
</script>  

<div class="ui-widget">
  <label for="mytags"> Companies</label>
<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input id="mytags" name="mytags" input type="text"/>
<onchange="javascript:_SFSUBMIT_"/></div>

Can't help but think that this is a bad idea...

iOnline247
– iOnline247

2017-04-03 17:03:39 +00:00
Commented Apr 3, 2017 at 17:03 — iOnline247
– iOnline247, Commented Apr 3, 2017 at 17:03

Taran Goel · Accepted Answer · 2017-03-27 16:38:32Z

0

Here is the HTML and Javascript we have used to get the auto complete dropdown on typing.

<div class="multichoice-dropdown" id="ddlDepartment">
<input id="txtDepartment" class="mandatory form-control" readonly="readonly" type="text">
<ul id="list-departments" style="display: none;">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>



$("#ddlDepartment input[type=text]").on("keyenter", function() {
var url = ">/_api/web/Lists/getByTitle('>')?$filter=startswith(Title,'>')&$select=Title";
//get the values from jQuery
var results = data.d.results;
$("#ddlDepartment ul li").remove();
$.each(results, function(index, item) {
    $("#ddlDepartment ul").append("" + item.Title + "");
});
});
$("#ddlDepartment input[type=text]").on("click", function(){
    $("#ddlDepartment ul").show();  
});

$("#ddlDepartment").on("click", "ul li", function(){

    $("#ddlDepartment input[type=text]").val($(this).text());   
});

$("#ddlDepartment").on("mouseleave", "#ddlDepartment ul", function(){
    $(this).hide();
});

Let me know if you need additional inputs.

edited Mar 27, 2017 at 16:38

Taran Goel

4,4825 gold badges22 silver badges44 bronze badges

answered Mar 24, 2017 at 16:45

Venkat Konjeti

4,9791 gold badge11 silver badges19 bronze badges

Thanks for this -- I had the autocomplete dropdown working already. What I was trying to accomplish was allowing the user to click on a value in the dropdown list and automatically submit it INTEAD of having to hit 'Submit' button. I tried to implement your script into mine, and it didn't work. I am not using <li> or <ul> tags, just an FYI. Does tbis make sense? Please let me know if I can explain this better.

TheJDScott
– TheJDScott

2017-03-24 18:41:59 +00:00
Commented Mar 24, 2017 at 18:41
On your selection click event, you can try button trigger click event. Example $("#btnId").trigger("click")

Venkat Konjeti
– Venkat Konjeti

2017-03-24 18:48:56 +00:00
Commented Mar 24, 2017 at 18:48
I'm not using a button, though. It's these weird SFSUBMIT"> commandsThe trigger event is in the HTML, not the js (from what I can tell). If I put it in the js as you'd suggested, where would I put it?

TheJDScott
– TheJDScott

2017-03-24 19:07:38 +00:00
Commented Mar 24, 2017 at 19:07
Here is a working javascript to trigger submit button on change of dropdown value. See this will helpful. $(document).ready(function() { $('[id*="Status_"]').on("change", function() { $('[id*="_diidIOSaveItem"]').trigger("click"); }); }); </code></pre> Here Status is a dropdown and diidSaveItem is a Save Button partial id

Venkat Konjeti
– Venkat Konjeti

2017-03-27 16:35:28 +00:00
Commented Mar 27, 2017 at 16:35
Thanks for that. I'm confused where I put this -- am I replacing the autcomplete call with this? Does this go in or after the Onload?$(document).ready(function() { $('[#tags="Status_"]').on("change", function() { $('[#tags"_diidIOSaveItem"]').trigger("click"); }); });

TheJDScott
– TheJDScott

2017-03-27 16:51:55 +00:00
Commented Mar 27, 2017 at 16:51

| Show 5 more comments

TheJDScott · Accepted Answer · 2017-03-27 18:48:53Z

UPDATE AND ANSWER I was able to make this happen by creating a cookie as a variable that stored the list item selected from the autocomplete dropdown list. The SFSUBMIT also needs to be referenced in the script, which I'm assuming is the equivalent of a trigger. Thanks for everyone's help.

Here's what worked:

$("#mytags").autocomplete({
            source: data,
            select: function(event, ui) {
                // alert(ui.item.label);
                $.removeCookie("MyTagCookie");
                $.cookie("MyTagCookie", ui.item.label, { path: '/' });
                $("#mytags").val($.cookie(""));
                _SFSUBMIT_;
            }
        });
    }

SharePointMan · Accepted Answer · 2017-04-03 12:41:18Z

0

What you need is change event like below. Just write the code in the braces below and it should work for you.

$("select[id='mytags'").change(function(){//YourCode}

answered Apr 3, 2017 at 12:41

SharePointMan

3,3645 gold badges34 silver badges52 bronze badges

Add a comment |

Stack Exchange Network

Submit item on select INSTEAD of button click in HTML Form WP Autocomplete dropdown List

3 Answers 3

Your Answer

Hot Network Questions

Submit item on select INSTEAD of button click in HTML Form WP Autocomplete dropdown List

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions