2

How can I add autocomplete to a textfilter webpart which keeps the mouse selected value as the textbox value?

With the current code user start typing then autocomplete list brings up but once he/she wants to select item the typed in characters are reverted.

The code works perfectly if the user selects with the keyboard.

I think the problem could be how text filter postback is using data entered, could that information be stored and later reused hence not using the selected item?

Please give a note if I need to provide more information.

Code:

<script>
$(document).ready(function(){

var itemSource = [];
var controlID = "ctl00_m_g_2ef45d15_c8c2_48ad_a3d4_37666031bae7_SPTextSlicerValueTextControl";
var externalParties = [];

$().SPServices({
    operation: "GetListItems",
    listName: "List1",
    async: false,
    completefunc: function(xData, Status){
            $(xData.responseXML).SPFilterNode("z:row").each(function(){
            externalParties.push($(this).attr("ows_Owner"));
            });
        }
});

$('input[id^=' + controlID + ']').autocomplete({
    source: externalParties,
    minLength: 1, 
    select: function(event, ui){
        var origEvent = event;
        while (origEvent.originalEvent !== undefined){
        origEvent = origEvent.originalEvent;
        }
        if (origEvent.type == 'click'){
            document.getElementById(controlID).value = ui.item.value
            return false;
        } else {  
        };
        return false;
    }
});
}); 
</script>

Edit: the problem seems to be with the __doPostBack function. If I turn it off:

$('input[id^=' + controlID + ']').attr('onchange',null)

It keeps the selected value however will not trigger the dopostback function. Trying to replace the dopostback then with this works:

$('input[id^=' + controlID + ']').attr('onchange',null).change(function(){setTimeout(__doPostBack(controlID, document.getElementById(controlID).value), 0);});

however it is doing the same - reverts to the original value. Please help how to tweak the postback then to use the selected value? Thanks!

Improve this question
2
  • jQuery UI widgets should work with mouse-click out-of-the-box. So I'm a bit confused about why you have written a custom handler to support a click event. Why have you? Commented Aug 7, 2015 at 7:46
  • @DanielZiga the custom handler can be removed from the above code but it is the same. User starts typing, the list drops down perfectly, items can be highlighted, but when he/she clicks on any of the list items the TextFilter reverts to the typed characters. Only if keyboard (down arrow) used works the selection. Its annoying and any help appreciated. Commented Aug 14, 2015 at 14:41

2 Answers 2

Reset to default
1

Finally I found the solution, it was with the _doPostBack function.

It should be removed and then handled with help of two functions:
• $('input[id^=' + controlID + ']').autocomplete({...
• $('input[id^=' + controlID + ']').keypress(function(e){...

The correct code is then: 

<script>
$(document).ready(function(){

var itemSource = [];
var controlID = "ctl00_m_g_2ef45d15_c8c2_48ad_a3d4_37666031bae7_SPTextSlicerValueTextControl";
var externalParties = [];

$().SPServices({
    operation: "GetListItems",
    listName: "List1",
    async: false,
    completefunc: function(xData, Status){
            $(xData.responseXML).SPFilterNode("z:row").each(function(){
            externalParties.push($(this).attr("ows_Owner"));
            });
        }
});

//Remove onchange __doPostBack event from the text filter
$('input[id^=' + controlID + ']').attr('onchange',null)

$('input[id^=' + controlID + ']').autocomplete({
    source: externalParties,
    minLength: 1, 
    select: function(event, ui){
        var origEvent = event;
        while (origEvent.originalEvent !== undefined){
        origEvent = origEvent.originalEvent;
        }
        if (origEvent.type == 'click'){
            //Add back the onchange __doPostBack event + set text filter value to selected
            document.getElementById(controlID).value = ui.item.value
            __doPostBack(controlID,ui.item.value); 
            return false;
        } else {  
            //Add back the onchange __doPostBack event if selected by keyboard as well
            __doPostBack(controlID,ui.item.value); 
        };
        return false;
    }
});
}); 

//If user only use keyboard (not autocomplete options) then we need to add a function for keypress as well
$('input[id^=' + controlID + ']').keypress(function(e) {
  if(e.keyCode == 13)
     {
         e.preventDefault();
         __doPostBack(controlID,document.getElementById(controlID).value); 
         $(this).autocomplete('close');
     }
});

</script>

I found the keypress code here:
https://stackoverflow.com/questions/10552767/jquery-search-on-enter-with-autocomplete

Improve this answer
0

This may be related. Check your form for hidden fields. I had the same situation doing autofill on select boxes. There is one value for what is displayed and another for what is actually kept in the form data.

ex. Select box is:

But the values are actually stored in:

so if you get the values from the Hidden id field you should be set.

Improve this answer
1
  • I do not have hidden fields in the site. Could the problem be that the filter box is connected to a SharePoint list? Anyway I am not sure why it only matters on mouse click and not when selected by keyboard. There are two different events assigned to the textfilter: • onchange="SetApplyFiltersToActiveIfPresent();setTimeout('__doPostBack(\'ctl00$m$g_2ef45d15_c8c2_48ad_a3d4_37666031bae7$SPTextSlicerValueTextControl\',\'\')', 0)" • onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" seems the onkeypress works properly but not the onchange. Commented Aug 17, 2015 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.