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!

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

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

// 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 + "')";  

    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) {  
    return coll  

<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"/>
  • Can't help but think that this is a bad idea...
    – iOnline247
    Apr 3 '17 at 17:03

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>

$("#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.

    • 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
      Mar 24 '17 at 18:41
    • On your selection click event, you can try button trigger click event. Example $("#btnId").trigger("click") Mar 24 '17 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
      Mar 24 '17 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 Mar 27 '17 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
      Mar 27 '17 at 16:51

    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:

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

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


    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

    Not the answer you're looking for? Browse other questions tagged or ask your own question.