Creating an iOS Search Bar

The iOS Search Bar is a common feature of iOS apps. This lesson will show you how to create a search bar using LiveCode controls and a iOS input field.

You can download the sample stack from this url: https://tinyurl.com/yamxcq7a

Creating the User Interface - Part 1

The first step is to create the basic UI of the search a bar.

  1. Create a new stack. I created an iPhone 6 stack.
  2. Add a rectangle graphic. This will be the background the search bar.
    • Set the name to "searchbarBackground"
    • Set the width to 375
    • Set the height to 40
    • Set the line thickness to 0
    • Set the background color to 201,201,206
    • Set the top to 0
    • Set the left to 0
  3. Add a round rectangle graphic. This will be the background for the text entry area.
    • Set the name to "searchtextBackground"
    • Set the width to 359
    • Set the height to 30
    • Set the line thickness to 0
    • Set the background color to 255,255,255
    • Set the top to 4
    • Set the left to 8
  4. Add an SVG Icon widget. This will be the search icon.
    • Set the name to "searchIcon"
    • Set the width to 14
    • Set the height to 14
    • Set the preset to the search icon
    • Set the normal color to 182,182,182
    • Set the top to 11
    • Set the left to 151

You should now have something that looks like this

Creating the User Interface - Part 2

The next step to to add a field. This field will allow you to see how the seach bar looks in the IDE and can be used to place the text entry control when it is created.

Add a label field.

  • Set the name to "searchTerm"
  • Set the width to 85
  • Set the height to 23
  • Set the line thickness to 0
  • Set the text size to 14
  • Set the text align to left
  • Set the text fill to 182,182,182
  • Set the contents to "Search"
  • Set the top to 7
  • Set the left to 173

You should now have something that looks like this

Creating the Text Input Control

When a card containing a search bar is opened we create a native text input control to allow the user to type search terms.

Add the preOpenCard and createSearchEntry handlers to the Card Script.

on preOpenCard
   if the environment is "mobile" then
		hide field "searchTerm"
      createSearchEntry
   end if
end preOpenCard

command createSearchEntry
   // Create a text entry control
   mobileControlCreate "input", "searchEntry"
   // Set the properties of the search entry control
   mobileControlSet "searchEntry", "rect", the rect of field "searchTerm"
   mobileControlSet "searchEntry", "visible", true
   mobileControlSet "searchEntry", "fontSize", 14
   mobileControlSet "searchEntry", "textColor", 182,182,182
end createSearchEntry

Deleting the Text Input Control

When a card containing native mobile controls is closed it is important to delete them. This is because native controls float above all other controls, inlcluding cards so will persist unless they are explicitly removed.

Add the closeCard handler to the Card Script.

on closeCard
   if the environment is "mobile" then
      mobileControlDelete "searchEntry"
   end if
end closeCard

Responding to touches

When the search bar is in its initial state and the user taps it the icon and text are move to the left and the cursor is placed into the text box.

We can implement this by handing the inputBeginEditing message. This message is sent when a mobile text input control has become focused and editing has commenced.

Add the inputBeginEditing handler to the card script.

on inputBeginEditing 
   // Move the search icon
   set the left of widget "searchIcon" to 21
   
   // Resize and move the text entry control
   mobileControlSet "searchEntry", "rect", "43,7,364,30"
   mobileControlSet "searchEntry", "text", empty
end inputBeginEditing

Stopping editing

When the user stop typing text into the search bar we want to reset the search bar.

Add the inputEndEditing handler to the Card Script.

on inputEndEditing    
   // Move the search icon
   set the left of widget "searchIcon" to 151
   
   // Resize and move the text entry control
   mobileControlSet "searchEntry", "rect", the rect of field "searchTerm"
   mobileControlSet "searchEntry", "text", "Search"
end inputEndEditing

Searching

The last step is to do something when the user has entered a search term. To do this we will handle the inputReturnKey message. This message is sent when the return key is pressed and focus is removed from the mobile text input control.

As an example we will just show a dialog displaying the search term.

on inputReturnKey
   // Display a dialog
   answer mobileControlGet("searchEntry", "text")
end inputReturnKey

If you want to search as the user types you can handle the inputTextChanged message.

on inputTextChanged
   local tSearchTerm
   
   // Get the search term
   put mobileControlGet("searchEntry", "text") into tSearchTerm
   searchList tSearchTerm
end inputTextChanged

5 Comments

Russell

I am making an iOS app and need to use the filter code to search a data grid (via a dgtext variable). The lesson above does not seem to have a "engage" button to action the search term. In my desktop version I am testing for Return. How do use filter and confirm the search in iOS? Any help much appreciated.

Russell

Half way there: I had the keyboard pop-up disabled in the simulator. So I can now input the search term and hit return but the filter code is not engaging. So I still need assistance please.

Elanor Buchanan

Hi Russell, it looks like the lesson was missing a couple of steps which I have now added. On mobile you can use inputReturnKey or inputTextChanged to trigger a search.

I hope that helps.

Kind regards

Elanor

Russell

Hi Elanor, Thank you for this. I am on the case! Regards Russell

Russell

Hi Elanor,

I used the inputReturnKey to initiate a filter on my data grid and it worked.

Thank you for your help. It is much appreciated.

Regards

Russell

Add your comment

E-Mail me when someone replies to this comment