Customizing SharePoint or other ASP.NET forms

bkwdesign's Avatar


13 Apr, 2011 07:07 PM

I'm hoping to find a way to use this autosuggest plugin within my SharePoint site. I wish this script simply caused the original form input field to become hidden but otherwise unaltared, so that there is no need to create custom server-side code to handle the posted data.

I was able to get this plugin to work, insofar as the user is presented with suggestions as they type and/or tab.

It seems, however, that the original control ID (i.e INPUT field name/id) is altared by this script so that the standard form logic supplied by the ASP.NET engine is not able to post the correct values.

I tried using the asHtmlID configuration parameter, but, it didn't seem to solve my problem. Is there some way to ensure that the original form field generated by the server is not obstructed?

  1. 1 Posted by bkwdesign on 14 Apr, 2011 03:58 PM

    bkwdesign's Avatar

    Well, I rolled my own solution that seems to be working for SharePoint.
    For any passers-by, SharePoint is a semi-automated platform that allows for display forms / editing forms to be automatically generated based on the 'list definition'. So, it's usually not necessary to write any server side code, but you CAN readily modify the auto-geneterated EditForm.aspx and DispForm.aspx in SharePoint Designer or in Visual Studio.

    I decided to add a dummy input field using plain HTML markup next to the specialized XSLT form control that I'm trying to manipulate. The script below then hides the INPUT control that ASP.NET is listening to and then makes auto-suggest work against the dummy input field.

    I chose to listen to the resultClick and selectionRemoved events, and in response, fire off my custom 'gatherValues' method which sniffs out a comma-separated string and assigns it back to the value property of the hidden INPUT control.

    I also added a helper function to turn the prefill string into a proper array of objects, as it seemed I couldn't readily get the prefill to work against a simple comma separated string ... even though the documentation seemed to indicate that it should have worked.

    Hope somebody finds this useful.

    $(document).ready(function () {
        var originalInputField = $("input[title=Units]");
        originalInputField.css({ display: "none" });//hide INPUT field generated by SharePoint
        var pf = originalInputField[0].value;//store any contents it may already have for possible preFill
        var data = { items: [
                { value: "1", name: "Box" },
                { value: "2", name: "Case" },
                { value: "3", name: "CubicYard" },
                { value: "4", name: "Drum" },
                { value: "5", name: "FloBin" },
                { value: "6", name: "Gallon" }
        function createPreFillObjArray(commaStr){
        var words = commaStr.split(",");
        var arr = [];
        for (var i = 0; i < words.length; i++) {
          arr.push({ value: i+1, name: words[i]});
        return arr;
        function gatherValues() {
            var str = $('ul[id=as-selections-unitstring] li:not(:last)').text().replace(/×/g,",").substring(1);
           originalInputField[0].value = str;
                { selectedItemProp: "name",
                    searchObjProps: "name",
                    resultClick: gatherValues,
                    selectionRemoved: function(elem){ elem.remove();gatherValues(); },
                    asHtmlID: "unitstring",
                    preFill: createPreFillObjArray(pf)

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac