Replace HTML list values with substring on SharePoint 2013 Custom List Field

Question

I'm using SPAutocomplete from SPServices because I have a requirement to make a searchable lookup field rather than an OOTB lookup field (drop down menu), as there is potential for thousands of values in the source column. It's working fine, except it's displaying "string;#" before the value, and I need only the value to appear for each list item.

Here is my code:

<script 
    src="https://code.jquery.com/jquery-3.3.1.js" 
    type=text/javascript>
</script>

<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.js">
    type=text/javascript>
</script> 

<script type="text/javascript">

    $(document).ready(function () {

        $().SPServices.SPAutocomplete({
            sourceList: "{C9AF367D-2CA1-40EE-B0AE-99CFDSAF6543389}",
            sourceColumn: "Reported_x0020_Tracking_x0020_Number",
            columnName: "Tracking Number",
            ignoreCase: true,
            filterType: "Contains",
            numChars: 1,
            uniqueVals: true,
            slideDownSpeed: 'fast'
        });

        $("input[id^='_x0074_wj5']").keyup(function() {
            var ul = document.getElementById("SPAutocomplete__x0074_wj5");
            var items = ul.getElementsByTagName("li");
            for (var i = 0; i < items.length; ++i) {
                items[i].JSON.stringify(items[i]);
                items[i].substring(9,21);
            }   
        });

    });

</script>

The HTML:

<ul id="SPAutocomplete__x0074_wj5" style="width: 385.99px; padding: 2px; border: 1px solid rgb(42, 31, 170); background-color: rgb(255, 255, 255); position: absolute; z-index: 40; margin: 0px;">
<li style="display: block; position: relative; cursor: inherit; color: rgb(68, 68, 68); background: transparent;">string;#RVFUF19-0000</li>
<li style="display: block; position: relative; cursor: inherit; color: rgb(68, 68, 68); background: transparent;">string;#RVFUF19-0001</li>
<li style="display: block; position: relative; cursor: inherit; color: rgb(68, 68, 68); background: transparent;">string;#RVFUF19-0002</li>
<li style="display: block;position: relative;cursor: pointer;">string;#RVFUF19-0003</li>
<li style="display: block;position: relative;cursor: pointer;">string;#RVFUF19-0004</li>
<li style="display: block;position: relative;cursor: pointer;">string;#RVFUF19-0005</li>
<li style="display: block;position: relative;cursor: pointer;">string;#RVFUF19-0006</li></ul>

The keyup function is firing, but I can't get it to display only the substring I want from the list items. I am beginner level with JQuery (actually a data scientist - but have been required to create custom lists for data collection purposes).

Any help is greatly appreciated!

Answer 1

A couple things I see going wrong here...

First of all, you are doing an arbitrary loop of 100 repetitions, when instead the HTMLCollection that is returned from getElementsByTagName has a length property, so you can set up the loop to run exactly as many times as needed.

Second, inside the loop you are doing JSON.stringify(items). So that's sending the entire collection of items through the JSON object to get stringified, every time you go through the loop. I don't think that's what you are intending to do, you are probably wanting to just work on one item at a time. To do that you will need to use the i counter in your loop to index into the collection of items and refer to things inside the loop as index[i]. The first time through the loop, when i is 0, that will be items[0] (the first item in the collection). The second time through the loop, when i is 1, it will be items[1] (the second item in the collection), etc., etc.

Third, I don't think you want to use JSON.stringify(). That works great when you want to convert a JSON object into a string so you can do something like send the data to another computer, or something, but I'm not sure how well that works on HTML elements. On HTML elements, however, there is a property called innerText, which is I think what you are really after.

Fourth, you could rely on knowing the starting index of the part of the string that you want, to use with substring, but in this case I would almost go with split, because you have an easy pattern (;#) to split on. split will return an array of the different parts of the string after splitting it, and you would know that you want the second part, which would be at index 1.

And fifth, $(this) inside the loop is probably not referring to what you think it refers to. $(this) is not referring to the individual li you want to affect inside the loop, $(this) is actually referring to the element that you attached the keypress event handler to, so $(this) inside that loop is actually $("input[id^='_x0074_wj5']").

So I would try setting it up as:

var ul = document.getElementById("SPAutocomplete__x0074_wj5");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++ ) {
    items[i].innerText = items[i].innerText.split(';#')[1];
}