PHP strpos with $.ajax and $.post jQuery – Search Strings Without Refreshing

Search string in PHP

  • In the last chapter, I explained how you can use the strpos function of PHP to search strings.
  • I used hard-coded values along with a demo where a user-entered value is taken to search string by using an HTML form.
  • As a user presses the submit / search button, it will return the result after refreshing the web page and tell whether the source string contains the search term or not.
  • In certain situations, you may need to return the search results without reloading the web page. One of the ways to accomplish that task is to use the PHP strpos function with jQuery ajax, post or get methods.

The $.ajax is the main method while $.post and $.get are shorthand methods of the ajax method. I will show you how to use $.ajax and post jQuery methods to work with strpos PHP function to search strings without reloading the web page.

A demo to use strpos and $.ajax method

On the demo page, a textbox is given without any submit button.

Enter some text or search term in the textbox and press the Tab key or click somewhere outside the textbox that will result in running the PHP code that checks the search term in source string by using the PHP strpos function:

Following is the source string that I used in the demo:

$chkstring = ‘Following is a strpos demo with jQuery $.ajax method to check whether source string contains the search term or not, without reloading the webpage’;

Try the demo online with search terms in the source string:

PHP strpos ajax

Online demo and code
In real time applications, the source strings can be database driven or arrays, etc. I have used this hard-coded string just to explain how strpos function works.

Let me explain the PHP and jQuery code used in the example:

First of all, a textbox with id=”searchterm” is created in the markup section:

<input type=”text” id=”searchterm”>

At the change event of the textbox, that occurs as you leave the textbox by using a Tab key or clicking mouse somewhere else, after changing the text inside it. The following jQuery code executes which is placed in the <script> section of <head> tag:

<script>

$(document).ready(function(){



$("#searchterm").change(function(){

searchterm=$("#searchterm").val();



$.ajax({url:"strpos-php.php",data:{term:searchterm},success: function(searchresult){

$(".result").html(searchresult);

}});

});



});

</script>

This is how it worked:

  • The value of textbox is assigned to a variable.
  • After that, the jQuery ajax method was used which called the strpos-php.php file.
  • The strpos-php.php file is placed at the same location where $.ajax method is used.
  • As $.ajax method is called, it also sends data which is the search term entered in the textbox. Before proceeding to “success” part, the code inside the strpos-php.php file will execute.

Following is the code inside strpos-php.php file:

<?php

$search_term=$_REQUEST["term"];

if( $search_term ){

$chkstring = 'Following is a strpos demo with jQuery $.ajax method to check whether source string contains the search term or not, without reloading the webpage';

$termpos = strpos($chkstring, $search_term);



if ($termpos === false) {

echo "The search term '$search_term' is not found!";

} else {

echo "The search term '$search_term' found at: $termpos position!  ";



}



}

?>

You can see, first the sent parameter’s value is taken by using the $_REQUEST array. After that, strpos method is used:

$termpos = strpos($chkstring, $search_term);

It checks the search string in the source string which is $chkstring, in that case. If search term that you entered is found, the echo statement will display a message.

The result will be returned to the “success” part of $.ajax method which is received by “searchresult” parameter. See this line in jQuery code again:

 $.ajax({url:"strpos-php.php",data:{term:searchterm},success: function(searchresult){

$(".result").html(searchresult);

 

The searchresult will be displayed in another div with class=”result” in the markup section.

Note: I have sued the change event in the demo. You may also try the keyup, keypress or keydown events to return results as the user enters the letters, without leaving the text field.

A demo to use strpos with $.post jQuery method

As I mentioned earlier, the $.post is a high level method of $.ajax which is easier to use. It loads data by using HTTP request.

In the following example, I will use almost the same code in PHP file while jQuery code uses the $.post method rather $.ajax.

PHP strpos post

Online demo and code

The main difference between this and above example is the jQuery code:

<script>

$(document).ready(function(){



$("#searchterm").change(function(){

searchterm=$("#searchterm").val();



$.post("strpos-post.php", {term:searchterm},function(postresult){

$(".result").html(postresult);

});

});

});

</script>

You can see how $.post method is calling the strpos-post.php file along with sending a parameter.

The code for the PHP file is almost the same except I used the $_POST array instead of $_REQUEST to get the value of sent parameter.

Case insensitive search by using PHP stripos and jQuery

  • As such, the strpos function is case sensitive. If you use “Demo” and “demo” in search, it has different meanings.
  • To enable case-insensitive search, you can use stripos PHP function.
  • See the following demo, where I simply replaced strpos method with stripos in the above example with $.post jQuery.
  • Try searching terms with capital and small letters:
Online demo and code

Only this line of code is changed in the PHP file:

$termpos = stripos($chkstring, $search_term);

You can see, if you search SOURCE in the above example with strpos function, it will display the result as not found.

Whereas, a search with stripos function will result as found!

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we solve the mysteries of coding together!