Merge pull request #20 from pjlamb12/6-multi-word-search

Multi Word Search

projects/ngx-plug-n-play-lib/src/lib/typeahead/README.md

@@ -22,14 +22,14 @@ Here is an example of implementing the directive:
 ```html
 <input
 	pnpTypeaheadInput
-	typeaheadDebounceTime="500"
+	typeaheadDebounceTime="300"
 	(valueChanged)="typeaheadValueChanged($event)"
 	type="text"
 	class="form-control"
 />
 ```
 
-The `typeaheadDebounceTime` input is for a number, in milliseconds, that the component will wait after the user types before emitting the new value. It defaults to 300 milliseconds.
+The `typeaheadDebounceTime` input is for a number, in milliseconds, that the component will wait after the user types before emitting the new value. It defaults to 500 milliseconds.
 
 The `typeaheadValueChanged` output gives the implementing component the updated value which can then be used for searching or whatever else you may need it for.
 

projects/ngx-plug-n-play-lib/src/lib/typeahead/typeahead-input/typeahead-input.directive.ts

@@ -9,7 +9,7 @@ import { TypeaheadKeys } from '../typeahead-keys.enum';
 export class TypeaheadInputDirective implements AfterContentInit {
 	private destroy$: Subject<boolean> = new Subject<boolean>();
 
-	@Input() typeaheadDebounceTime: number = 300;
+	@Input() typeaheadDebounceTime: number = 500;
 	@Output() valueChanged: EventEmitter<string> = new EventEmitter<string>();
 
 	constructor(private searchInput: ElementRef) {}

projects/ngx-plug-n-play-lib/src/lib/typeahead/typeahead-result/typeahead-result.directive.spec.ts

@@ -57,16 +57,16 @@ describe('TypeaheadResultDirective', () => {
 		expect(paragraphText).toBe('<strong>Test</strong> <strong>test</strong> Item 1');
 	});
 
-	it('should mark the matching pattern in the element with case sensitivity', () => {
-		component.caseInsensitiveMatch = false;
+	it('should mark the multi word matching pattern in the element with case insensitivity', () => {
+		component.caseInsensitiveMatch = true;
 		component.highlightMatches = true;
 		component.matchTerm = 'test';
 
 		fixture.detectChanges();
 
 		const paragraph = fixture.debugElement.query(By.css('p'));
 		const paragraphText = paragraph.nativeElement.innerHTML;
-		expect(paragraphText).toBe('Test <strong>test</strong> Item 1');
+		expect(paragraphText).toBe('<strong>Test</strong> <strong>test</strong> Item 1');
 	});
 
 	it('should leave the content of the element untouched if highlightMatches input is false', () => {

projects/ngx-plug-n-play-lib/src/lib/typeahead/typeahead.util.spec.ts

@@ -10,6 +10,15 @@ describe('Typeahead Util', () => {
 		expect(result).toBe('<strong>This</strong> is a test, <strong>this</strong> is a test');
 	});
 
+	it('should trim the matching string and highlight the matching string patterns with case insensitivity', () => {
+		const itemString = 'This is a test, this is a test';
+		const patternString = 'this ';
+
+		const result = highlightStringMatches(itemString, patternString, true);
+
+		expect(result).toBe('<strong>This</strong> is a test, <strong>this</strong> is a test');
+	});
+
 	it('should highlight the matching string patterns with case sensitivity', () => {
 		const itemString = 'This is a test, this is a test';
 		const patternString = 'this';

projects/ngx-plug-n-play-lib/src/lib/typeahead/typeahead.util.ts

@@ -1,8 +1,12 @@
 export function highlightStringMatches(itemString: string, patternString: string, caseInsensitive: boolean = true) {
-	const patternArray: string[] = patternString.split(' ');
+	const patternArray: string[] = patternString
+		.trim()
+		.split(' ')
+		.filter(item => item !== '');
 	const regExpOptions: string = caseInsensitive ? 'ig' : 'g';
 
-	for (const pattern of patternArray) {
+	for (let pattern of patternArray) {
+		pattern = pattern.trim();
 		const regExp = new RegExp(pattern, regExpOptions);
 		itemString = itemString.replace(regExp, (match, index) => {
 			return `<strong>${match}</strong>`;