Autocomplete (Source List = Destination List)

Dec 3, 2010 at 3:03 PM
Edited Dec 3, 2010 at 3:08 PM

Hi there, using the following code at my test page works fine

<script src="http://xxx.com/shared_files/Java/jQuery/jquery.min.js" type="text/javascript"></script>
<script src="http://xxx.com/shared_files/Java/SPServices/jquery.SPServices-0.5.8.min.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$().SPServices.SPAutocomplete({	
			sourceList: "îxot",
			sourceColumn: "SingleLine",
			columnName: "SingleLine",
			ignoreCase: true,
			numChars: 3,
			slideDownSpeed: 1000,
			debug: true
		});
	});
</script>
Sourcelist îxot where to pull the suggestions for entries is the same list (library) where the new item should be added. Works fine!
 
Sourcelist "Genehmigungsantraege" is also Destination List for the result from SPAutocomplete. Try to do this three times in one list for three lines of Single text.
Only the third one show any function/Suggestions during upload a document and filling metadata. The first and second did not work.
<script src="http://xxx.com/shared_files/Java/jQuery/jquery.min.js" type="text/javascript"></script>
<script src="http://xxx.com/shared_files/Java/SPServices/jquery.SPServices-0.5.8.min.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$().SPServices.SPAutocomplete({	
			sourceList: "Genehmigungsantraege",
			sourceColumn: "Projekt",
			columnName: "Projekt",
			ignoreCase: true,
			numChars: 1,
			slideDownSpeed: 1000,
			debug: true
		});
	});

$(document).ready(function() {
		$().SPServices.SPAutocomplete({	
			sourceList: "Genehmigungsantraege",
			sourceColumn: "Anlage",
			columnName: "Anlage",
			ignoreCase: true,
			numChars: 1,
			slideDownSpeed: 1000,
			debug: true
		});
	});

$(document).ready(function() {
		$().SPServices.SPAutocomplete({	
			sourceList: "Genehmigungsantraege",
			sourceColumn: "Zweck",
			columnName: "Zweck",
			ignoreCase: true,
			numChars: 1,
			slideDownSpeed: 1000,
			debug: true
		});
	});
Any ideas and help are welcome.
Warmest regards
Michael
(Edited for text loss during enter of the text)
Coordinator
Dec 3, 2010 at 3:19 PM

It wouldn't seem to make sense to use the same list as the source for the three columns [Projekt, Anlage, Zweck], but you may have discovered a bug. Looking at the code, it seems like I've got the ids set to be unique so that multiple uses on the same page should work. I'll have to look into this. Can you try using three different sourceLists and let me know if that works?

M.

Dec 4, 2010 at 4:44 PM
Edited Dec 4, 2010 at 4:52 PM

Hello Marc, I will test this next week when back at the office. My idea of using this is a large document library, where some additional metadata for the documenst must entered. After this I used calculated columns for a sorted view. Entering the metadata can result in typing in some repeating words (example: Enter "First Procject" more than once). So I would reduce typing and typos, operator can choose the same entry as he had made before/last time. Try to make the operator feeling comfortable with this (and killing there todays shared drives) I am looking for as much as possible "nice gimmicks".

Regards

Michael

 

Edited for deleting of typos and please excuse the incredible grammar.

Dec 5, 2010 at 9:20 AM

Hi Marc,

could not wait until Monday. Now I have tried to do it with the lists. Have added two short lists only for testing with some senseless content.

Autocomplete now show for the second and third part suggestions coming from  the two new lists.

 

The first entriy did still not work. I can see that there appears at the right side of the box the same "icon" (java is running?)

as appear at the two following boxes, but no suggestions. The "list" where the autocomplete in this case is looking is a document library,

the column looked for (Projekt) contains always YYYY MMM as numbers (sinlge line of text).

The both extra for this test added columns are custom lists with single line text and two columns.

Need more? Thanks for routing me in the jungle :)

Kind regards

Michael

Coordinator
Dec 12, 2010 at 5:07 AM

Michael:

I'm really sorry not to have gotten back to you sooner. Did you work this out?

M.

Dec 12, 2010 at 3:12 PM

Hello Marc, no problem. I appreciate your help and it is not that urgent  ;)

Unfortunately, I only did last sunday what I mentioned above with this two custom lists for test purposes. They really work fine, the first call (the recursive into the same list) not.

I can not make the difference if this is a bug or a feature ;)

I try to explain may needs: I would like to have a function, that the user show matching entries (so that they can be choosen with a click) coming from the same list, when user is entering a new item.

That can be, but must not, the same text or only partial matching text, but it is easier to take and edit instead of entering the whole bunch again.

Example: List contain alread three entries: driving bus, driving car, driving bike and user shall enter driving bus again he/she may select it from the autocomplete list. Even, if she/he wants to enter "driving truck" one of the old entries can seletect and edited (please imagine, that the real entries wil be longer, more complex and not as stupid as my examples)

I guess, this can also be solved by a lookup column which get added new items from the list after users input, but this will force the user to scrolldown or somehow to pick the repeating entry out of a long list of items...this autocomplete will reduce the number of possible matches and make it easier to select one.

 

Warmest Regards

Michael

Dec 23, 2010 at 5:39 PM

Hello Michaael,,

I am using the SPAutocomplete the same way  you are (to allow users to select from the previously entered values for a field). It seems to be working for me with three separate SPlookups back to the same list i'm editing.  If you can use Fiddler to spy on your http requests to the web service you may find your issue. I know it helped me.

One issue I had was that if the user entered the same value for  a field 3 times, that same value would show up in the autocomplete 3 times.  I submited a patch that allows you to select 'distinct' values to alleviate this.

 

hth,

Russell

Dec 23, 2010 at 7:12 PM

Hello Russell,

thank you for your answer. I did not know anything about fiddler (will have a look, but be quiet unsure if I can install it at my business environment). May I ask if you would like to share your code to show me an example how it works for you?

Here (or somehow more privat, however)?

Nevertheless, I will have a look and retry after Xmas, because we have installed the latest hotfixes just last week.

 

Merry Xmas, kind regards

 

Michael

 

 

 

Dec 23, 2010 at 7:28 PM

I just noticed that I'm using LIstids, while you're using listnames. Don't know if that would make a differenc3e. Heres my code:

<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="../../Javascript/jquery.SPServices-0.5.6.js"></script>  
<script type="text/javascript">
    $(document).ready(function() {  
       $().SPServices.SPAutocomplete({  
            sourceList: "{F9643F80-45B1-4223-9951-30A419845F9A}",  
            sourceColumn: "Sub_x002d_Topic",  
            columnName: "Sub-Topic",  
            numChars: 2,  
            ignoreCase: true,  
            distinct: true,  
            slideDownSpeed: 100,  
            debug: true 
        });  
       $().SPServices.SPAutocomplete({  
            sourceList: "{F9643F80-45B1-4223-9951-30A419845F9A}",  
            sourceColumn: "DocumentType",  
            columnName: "Document Type",  
            numChars: 2,  
            ignoreCase: true,  
            distinct: true,  
            slideDownSpeed: 100,  
            debug: true 
        });  
  $().SPServices.SPAutocomplete({  
            sourceList: "{F9643F80-45B1-4223-9951-30A419845F9A}",  
            sourceColumn: "Title",  
            columnName: "Title",  
            numChars: 2,  
            ignoreCase: true,  
            distinct: true,  
            slideDownSpeed: 100,  
            debug: true 
        });  


    });  
</script> 

and the modified Sp Autocomplete method
 // Provide suggested values from a list for in input column based on characters typed
    $.fn.SPServices.SPAutocomplete = function(options) {

        var opt = $.extend({}, {
            WebURL: "", 						// [Optional] The name of the Web (site) which contains the sourceList
            sourceList: "", 					// The name of the list which contains the values
            sourceColumn: "", 				// The static name of the column which contains the values
            columnName: "", 					// The display name of the column in the form
            CAMLQuery: "", 					// [Optional] For power users, this CAML fragment will be Anded with the default query on the relatedList
            numChars: 0, 					// Wait until this number of characters has been typed before attempting any actions
            ignoreCase: false, 				// If set to true, the function ignores case, if false it looks for an exact match
            distinct: false, 				// If set to true, the function only adds distinct values to the list -- Russell Gove
            slideDownSpeed: "fast", 			// Speed at which the div should slide down when values match (milliseconds or ["fast" | "slow"])
            processingIndicator: "", 			// If present, show this while processing
            debug: false						// If true, show error messages; if false, run silent
        }, options);

        // Find the input control for the column and save some of its attributes
        var columnObj = $("input[Title='" + opt.columnName + "']");
        $("input[Title='" + opt.columnName + "']").css("position", "");
        var columnObjId = $(columnObj).attr("ID");
        var columnObjColor = $(columnObj).css("color");

        if (columnObj.html() == null && opt.debug) {
            errBox("SPServices.SPAutocomplete",
				"columnName: " + opt.columnName,
				"Column is not an input control or is not found on page");
            return;
        }

        // Create a div to contain the results
        var containerId = genContainerId("SPAutocomplete", opt.columnName);

        // Add the container for the matching values		
        columnObj.after("
    "); // Set the width to match the width of the input control $("#" + containerId).css("width", columnObj.width()); // Wrap the input control in a table columnObj.wrap("
     
    "); // Add a table cell to the right to show the processingIndicator columnObj.closest("tr").append(" " + opt.processingIndicator + ""); // Handle keypresses $(columnObj).keyup(function() { // Get the column's value var columnValue = $(this).val(); // Have enough characters been typed yet? if (columnValue.length < opt.numChars) { $("#" + containerId).hide(); return false; } // Hide the container while we're working on it $("#" + containerId).hide(); // Show the the processingIndicator $("#" + containerId + "processingIndicator").show(); // Array to hold the matched values var matchArray = new Array(); // Build the appropriate CAMLQuery //var camlQuery = ""; //if (opt.CAMLQuery.length > 0) camlQuery += ""; //camlQuery += ""; //if (opt.CAMLQuery.length > 0) camlQuery += opt.CAMLQuery + ""; //camlQuery += ""; // Build the appropriate CAMLQuery to only return items that match--Russell gove var camlQuery = ""; if (opt.CAMLQuery.length > 0) camlQuery += ""; camlQuery += "" + $(columnObj)[0].value + ""; if (opt.CAMLQuery.length > 0) camlQuery += opt.CAMLQuery + ""; camlQuery += ""; // Call GetListItems to find all of the potential values $().SPServices({ operation: "GetListItems", async: false, webURL: opt.WebURL, listName: opt.sourceList, // Make sure we get all the items, ignoring any filters on the default view. //CAMLQuery: "", CAMLQuery: camlQuery, CAMLViewFields: "", // Override the default view rowlimit and get all appropriate rows CAMLRowLimit: 0, completefunc: function(xData, Status) { // Handle upper/lower case if ignoreCase = true var testValue = opt.ignoreCase ? columnValue.toUpperCase() : columnValue; // See which values match and add the ones that do to matchArray $(xData.responseXML).find("[nodeName=z:row]").each(function() { var thisValue = opt.ignoreCase ? $(this).attr("ows_" + opt.sourceColumn).toUpperCase() : $(this).attr("ows_" + opt.sourceColumn); if (testValue == thisValue.substr(0, testValue.length)) { matchArray.push($(this).attr("ows_" + opt.sourceColumn)); } }); } }); // Build out the set of list elements to contain the available values var out = ""; if (opt.distinct == false) { for (i = 0; i < matchArray.length; i++) { out += "
  • " + matchArray[i] + ""; } } else { var found = false; for (i = 0; i < matchArray.length; i++) { // If it appeared previously in the array, dont add again found = false; for (j = 0; j < i; j++) { if (matchArray[i] == matchArray[j]) { found = true; break; } } if (found == false) { out += "
  • " + matchArray[i] + ""; } } } // Add all the list element to the containerId container $("#" + containerId).html(out); // Set up hehavior for the available values in the list element $("#" + containerId + " li").click(function() { $("#" + containerId).fadeOut(opt.slideUpSpeed); $("#" + columnObjId).val($(this).html()); }).mouseover(function() { var mouseoverCss = { "cursor": "hand", "color": "#ffffff", "background": "#3399ff" }; $(this).css(mouseoverCss); }).mouseout(function() { var mouseoutCss = { "cursor": "inherit", "color": columnObjColor, "background": "transparent" }; $(this).css(mouseoutCss); }); // If we've got some values to show, then show 'em! $("#" + containerId + "processingIndicator").fadeOut("slow"); if (matchArray.length > 0) $("#" + containerId).slideDown(opt.slideDownSpeed); }); }; // End of function SPAutocomplete
Jan 7, 2011 at 2:54 PM

Hi all, just found some spare time to come back to this issue.

1) Happy New Year to all Coders and Readers (especially to Marc and Russel)

2) Have learned, that my explanations did not describe what I am doing.

Again,when I am  include two separat list and running the Autocomplete stuff with them is working proper.  I did this for the second and third call of Autocomplete (see above). The first call is still not working.

But.: I want to use this features to suggest already entered text the user, when he/she is Uploading/Editing an entry in a document library. The mentioned Sourcelist "Genehmigungsantraege" is a Document Library,

where I have added some metadata fields (for grouping, sorting, filtering this library instead of using subfolder confusion).

When I try to follow Russels idea, then I distinguished, that the Sourcelist  is not a "list", it is a Document Library.  My Bad !!!!

HAve now figured out how to get the list id of this document library (following this: http://serverfault.com/questions/93317/sharepoint-list-name-issue ).

Entering the List ID in " "    (%7BCE7795AA%2DD859%2D47C9%2DBD02%2D2186AC20E09B%7D converted to {CE7795AA-D859-47C9-BD02-2186AC20E09B}) instead of SourceList did not change the behavior.

So, any advice, help or ... will be appreciated.

Kind Regards

Michael

Coordinator
Jan 31, 2011 at 3:13 PM

Michael:

Sorry for not following up on this one. Did you get this working?

M.