Lets work together to build a nice SearchBar sample app ...

 but would also like to add that it (especially ‘textField’) be placed in a delay (i did it with delay + alpha transition). This is to prevent the textField from appearing suddenly on top of the screen (just a split second)

Did you try this on Android device? I used to do this but gave that method up because it wouldn’t work on Android.

Quick update. I integrated Rob Miracle’s recent inputText tutorial into this SearchBox sample. Here’s the updated code. 

First the supporting widget_newTextField.lua

-- -- Include the existing widget library. When this is done, widget.newTextField will -- temporarily be added to the in-memory widget library. -- local widget = require( "widget" ) -- -- Forward declare the on screen textField Object -- local textField -- -- This is the starter code for a newTextField widget -- function widget.newTextField(options) local customOptions = options or {} local opt = {} -- -- Core parameters -- opt.left = customOptions.left or 0 opt.top = customOptions.top or 0 opt.x = customOptions.x or 0 opt.y = customOptions.y or 0 opt.width = customOptions.width or (display.contentWidth \* 0.75) opt.height = customOptions.height or 20 opt.id = customOptions.id opt.listener = customOptions.listener or nil opt.text = customOptions.text or "" opt.inputType = customOptions.inputType or "default" opt.keyboardType = customOptions.keyboardType or "done" opt.autoPopKeyboard = customOptions.autoPopKeyboard or false --opt.eraseInitText = customOptions.eraseInitText or false opt.font = customOptions.font or native.systemFont opt.fontSize = customOptions.fontSize or opt.height \* 0.67 -- Vector options opt.strokeWidth = customOptions.strokeWidth or 2 opt.cornerRadius = customOptions.cornerRadius or opt.height \* 0.33 or 10 opt.strokeColor = customOptions.strokeColor or {0, 0, 0} opt.backgroundColor = customOptions.backgroundColor or {1, 1, 1} -- -- Create the display portion of the widget and position it. -- local field = display.newGroup() local background = display.newRoundedRect( 0, 0, opt.width, opt.height, opt.cornerRadius ) background:setFillColor(unpack(opt.backgroundColor)) background.strokeWidth = opt.strokeWidth background.stroke = opt.strokeColor field:insert(background) if opt.x then field.x = opt.x elseif opt.left then field.x = opt.left + opt.width \* 0.5 end if opt.y then field.y = opt.y elseif opt.top then field.y = opt.top + opt.height \* 0.5 end -- create the native.newTextField to handle the input field.textField = native.newTextField(0, 0, opt.width - opt.cornerRadius, opt.height - opt.strokeWidth \* 2) field.textField.x = field.x field.textField.y = field.y field.textField.hasBackground = false field.textField.inputType = opt.inputType field.textField:setReturnKey(opt.keyboardType) field.textField.text = opt.text --field.textField.eraseInitText = opt.eraseInitText if opt.autoPopKeyboard then native.setKeyboardFocus( field.textField ) end if opt.listener and type(opt.listener) == "function" then field.textField:addEventListener("userInput", opt.listener) end -- -- Handle setting the text parameters for the native field. -- local deviceScale = (display.pixelWidth / display.contentWidth) \* 0.5 field.textField.font = native.newFont( opt.font ) field.textField.size = opt.fontSize \* deviceScale -- -- Sync the position of the native object and the display object. -- A 60 fps app will make this smoother than a 30 fps app -- -- You could add in things to handle other properties like alpha, .isVisible etc. -- that both objects support. -- local function syncFields(event) field.textField.x = field.x field.textField.y = field.y end Runtime:addEventListener( "enterFrame", syncFields ) -- -- Handle cleaning up the native object when the display object is destroyed. -- function field:finalize( event ) event.target.textField:removeSelf() end field:addEventListener( "finalize" ) return field end -- -- Do some fun things like move the text field -- Change the text. -- Remove it. -- --[[timer.performWithDelay( 5000, function() transition.to(textField, {time=1000, y=300, onComplete = function(target) target.textField.text = "Bye Bye"; end }) end )]]-- --timer.performWithDelay( 10000, function() textField:removeSelf(); end )

And then … updated main.lua taking advantage of the inputText tutorial code :

display.setStatusBar( display.HiddenStatusBar ) --import the widget library local widget = require( "widget\_newTextField" ) local widget = require( "widget" ) -- create a constant for the left spacing of the row content local LEFT\_PADDING = 10 --Set the background to white display.setDefault( "background", 1, 1, 1 ) --Create a group to hold our widgets & images local widgetGroup = display.newGroup() -- The gradient used by the title bar local titleGradient = { type = 'gradient', color1 = { 189/255, 203/255, 220/255, 255/255 }, color2 = { 89/255, 116/255, 152/255, 255/255 }, direction = "down" } local inputFontSize = 18 local searchField local list local fieldHandler local searchBarActiveImage local tableViewYDelta = 30 local searchBarVisible = false -- Boolean used to track searchBar state local backButton, resetSearchButton, cancelButton local rowTitles = {} local eraseInitText = true -- Create toolbar to go at the top of the screen local titleBar = display.newRect( display.contentCenterX, 0, display.contentWidth, 32 ) titleBar:setFillColor( titleGradient ) titleBar.y = display.screenOriginY + titleBar.contentHeight \* 0.5 -- create embossed text to go on toolbar local titleText = display.newEmbossedText( "My List", display.contentCenterX, titleBar.y, native.systemFontBold, 20 ) -- create a shadow underneath the titlebar (for a nice touch) local shadow = display.newImage( "shadow.png" ) shadow.anchorX = 0; shadow.anchorY = 0 -- TopLeft anchor shadow.x, shadow.y = 0, titleBar.y + titleBar.contentHeight \* 0.5 shadow.xScale = 320 / shadow.contentWidth shadow.alpha = 0.45 --Text to show which item we selected local itemSelected = display.newText( "You selected", 0, 0, native.systemFontBold, 24 ) itemSelected:setFillColor( 0 ) itemSelected.x = display.contentWidth + itemSelected.contentWidth \* 0.5 itemSelected.y = display.contentCenterY widgetGroup:insert( itemSelected ) -- Handle row rendering local function onRowRender( event ) local phase = event.phase local row = event.row local isCategory = row.isCategory -- in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group. -- in order to use contentHeight properly, we cache the variable before inserting objects into the group local groupContentHeight = row.contentHeight if row.id == "searchBar" then local searchBarImage = display.newImageRect( row, "searchBar.png", 320, 44 ) searchBarImage.anchorX = 0 searchBarImage.anchorY = 0 searchBarImage.x = 0 searchBarImage.y = 0 else local rowTitle = display.newText( row, rowTitles[row.index], 0, 0, native.systemFontBold, 16 ) -- in Graphics 2.0, the row.x is the center of the row, no longer the top left. rowTitle.x = LEFT\_PADDING -- we also set the anchorX of the text to 0, so the object is x-anchored at the left rowTitle.anchorX = 0 rowTitle.y = groupContentHeight \* 0.5 rowTitle:setFillColor( 0, 0, 0 ) if not isCategory then local rowArrow = display.newImage( row, "rowArrow.png", false ) rowArrow.x = row.contentWidth - LEFT\_PADDING -- we set the image anchorX to 1, so the object is x-anchored at the right rowArrow.anchorX = 1 -- we set the image anchorX to 1, so the object is x-anchored at the right rowArrow.y = groupContentHeight \* 0.5 end end end -- -- Set up a function to handle the editing events and dismiss the keyboard when done. -- local function textFieldHandler( event ) -- -- event.text only exists during the editing phase to show what's being edited. -- It is \*\*NOT\*\* the field's .text attribute. That is event.target.text -- if event.phase == "began" then -- user begins editing textField print( "Begin editing", event.target.text ) -- check if we are supposed to clear the initial text supplied to the widget if eraseInitText then event.target.text = "" eraseInitText = false end elseif event.phase == "ended" or event.phase == "submitted" then -- do something with defaulField's text print( "Final Text: ", event.target.text) native.setKeyboardFocus( nil ) searchTextSubmitted( event.target.text ) elseif event.phase == "editing" then print( event.newCharacters ) print( event.oldText ) print( event.startPosition ) print( event.text ) end end local function searchBarActivate() -- -- Create an instance of the widget. -- searchField = widget.newTextField({ width = 183, height = 24, text = "Search", fontSize = 18, font = "HelveticaNeue-Light", cornerRadius = 0, strokeWidth = 1, inputType = "default", keyboardType = "search", autoPopKeyboard = true, --eraseInitText = true, listener = textFieldHandler, }) --searchField.anchorX = 0; searchField.anchorY = 0 searchField.x = 125 searchField.y = 22 searchField.alpha = 0 --eraseInitText = true -- Move tableView up by number of pixels specified in tableViewYDelta variable transition.to( list, { y= (-1 \* tableViewYDelta), time = 150, delta = "true" } ) -- Make the hidden Search UI elements visible gradually transition.to( searchBarActiveImage, { time=200, alpha=1 } ) transition.to( searchField, { time=200, alpha=1 } ) transition.to( cancelButton, { time=200, alpha=1 } ) transition.to( resetSearchButton, { time=200, alpha=1 } ) -- Bring keyboard up without waiting for user tap into Search text box native.setKeyboardFocus( searchField ) -- Lock the tableView so it does not respond to scrolling list.\_view.\_isVerticalScrollingDisabled = true searchBarVisible = true end -- Hande row touch events local function onRowTouch( event ) local phase = event.phase local row = event.target if "press" == phase then print( "Pressed row: " .. row.index ) elseif "release" == phase then -- Update the item selected text print( "Tapped and/or Released row: " .. row.index ) -- tap & release occured on 1st row which happens to be the search box. if row.index == 1 then -- Check if search box is already active if searchBarVisible == false then searchBarActivate() end else itemSelected.text = "You selected: " .. rowTitles[row.index] --Transition out the list, transition in the item selected text and the back button -- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth --transition.to( list, { x = - list.contentWidth \* 0.5, time = 400, transition = easing.outExpo } ) transition.to( list, { x = - list.contentWidth \* 0.5, time = 400, transition = easing.outExpo } ) transition.to( itemSelected, { x = display.contentCenterX, time = 400, transition = easing.outExpo } ) transition.to( backButton, { alpha = 1, time = 400, transition = easing.outQuad } ) end end end -- Create a tableView list = widget.newTableView { top = 32, width = 320, height = 448, onRowRender = onRowRender, onRowTouch = onRowTouch, } searchBarActiveImage = display.newImageRect( widgetGroup, "searchBarEditing.png", 320, 44 ) searchBarActiveImage.anchorX = 0 searchBarActiveImage.anchorY = 0 searchBarActiveImage.x = 0 searchBarActiveImage.y = 0 searchBarActiveImage.alpha = 0 widgetGroup:insert( searchBarActiveImage ) --Insert widgets/images into a group widgetGroup:insert( list ) widgetGroup:insert( titleBar ) widgetGroup:insert( titleText ) widgetGroup:insert( shadow ) widgetGroup:insert( searchBarActiveImage ) local function searchTextSubmitted(searchText) print("Search text submitted " .. searchText) -- Hide keyboard native.setKeyboardFocus( nil ) -- Hide searchBox searchField.alpha = 0 searchBarActiveImage.alpha = 0 cancelButton.alpha = 0 resetSearchButton.alpha = 0 -- Move tableView down by number of pixels specified in tableViewYDelta variable transition.to( list, { y= tableViewYDelta, time = 200, delta = "true" } ) -- release the scroll lock on tableView list.\_view.\_isVerticalScrollingDisabled = false searchBarVisible = false -- Remove the native.textField so that it does not cause mischief --[[] if searchField then searchField:removeSelf() searchField = nil end ]]-- --searchField:removeSelf() end --Items to show in our list local listItems = { { title = "Breakfast", items = { "Coffee", "Bagel", "Cereal", "Toast" } }, { title = "Lunch", items = { "Sandwich", "Taco", "Noodles", "Soup", "Fries" } }, { title = "Dinner", items = { "Pizza", "Burger", "Steak", "Beef", "Lamb" } }, { title = "Desert", items = { "Apple Pie", "Ice Cream", "Cake", "Chocolate" } }, } --Handle the back button release event local function onCancelRelease() -- Hide Keyboard native.setKeyboardFocus( nil ) -- Hide searchBox searchBarActiveImage.alpha = 0 cancelButton.alpha = 0 resetSearchButton.alpha = 0 searchField.text = "" searchField.alpha = 0 -- Move tableView down by number of pixels specified in tableViewYDelta variable transition.to( list, { y= tableViewYDelta, time = 200, delta = "true" } ) -- release the scroll lock on tableView list.\_view.\_isVerticalScrollingDisabled = false searchBarVisible = false -- Remove the native.textField so that it does not cause mischief if searchField then searchField:removeSelf() searchField = nil end end --Create the Cancel search button cancelButton = widget.newButton { width = 50, height = 56, label = "Cancel", --labelYOffset = - 1, onRelease = onCancelRelease } cancelButton.alphaX, cancelButton.alphaY = 0, 0 cancelButton.alpha = 0 cancelButton.x = 284 cancelButton.y = 21 widgetGroup:insert( cancelButton ) --Handle the back button release event local function onResetRelease() print("Search field reset") searchField.text = "" end --Create the Cancel search button resetSearchButton = widget.newButton { width = 24, height = 24, label = "", defaultFile = "resetSearch.png", overFile = "resetSearch.png", --labelYOffset = - 1, onRelease = onResetRelease } resetSearchButton.alphaX, resetSearchButton.alphaY = 0, 0 resetSearchButton.alpha = 0 resetSearchButton.x = 234 resetSearchButton.y = 22 widgetGroup:insert( resetSearchButton ) --Handle the back button release event local function onBackRelease() --Transition in the list, transition out the item selected text and the back button -- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth transition.to( list, { x = list.contentWidth \* 0.5, time = 400, transition = easing.outExpo } ) transition.to( itemSelected, { x = display.contentWidth + itemSelected.contentWidth \* 0.5, time = 400, transition = easing.outExpo } ) transition.to( backButton, { alpha = 0, time = 400, transition = easing.outQuad } ) end --Create the back button backButton = widget.newButton { width = 298, height = 56, label = "Back", labelYOffset = - 1, onRelease = onBackRelease } backButton.alpha = 0 backButton.x = display.contentCenterX backButton.y = display.contentHeight - backButton.contentHeight widgetGroup:insert( backButton ) rowTitles[1] = "Search" list:insertRow{ id = "searchBar", rowHeight = 42, isCategory = false, } for i = 1, #listItems do --Add the rows category title rowTitles[#rowTitles + 1] = listItems[i].title --Insert the category list:insertRow{ rowHeight = 24, rowColor = { default = { 150/255, 160/255, 180/255, 200/255 }, }, isCategory = true, } --Insert the item for j = 1, #listItems[i].items do --Add the rows item title rowTitles[#rowTitles + 1] = listItems[i].items[j] --Insert the item list:insertRow{ rowHeight = 40, isCategory = false, listener = onRowTouch } end end

Trying to run this example. Still need shadow.png, rowArrow.png, Can you point me to those?

Rich

Thanks for checking it out.

This search sample is based on Corona Labs ListView2 Demo App. You can find this in Corona Samples / Interface on your computer. The images you mention are part of that sample so I did not bother uploading them here again. The additional required images are attached to the 1st post in the thread. Use the most recent main.lua. The one in 1st post is outdated. 

can i have full source code. thank you.

can i have full source code. thank you.

Has this been updated recently?  Where is the best place to get the full code?

I tried this on Android and I can’t test it in the Simulator because it can’t do the keyboard pop-up, but in the simulator I can click and get the text area but no way of typing in it.

When I build for Android, when I click to get the text area… it blows up the app.

Has anyone gotten this to work on Android?

Can I have the .png files other than the shadow and rowarrow which I have found in the interface corona. The others such as the searchBar, searchBarEditing and resetSearch png files? I cannot run it because of those png src files. 

searchBar, searchBarEditing and resetSearch png files are attached to the first post in the thread. Don’t know if this code is still working with the current versions of Corona SDK. Its been a while since this was posted. All the best.

Thanks for the reply.  I actually managed to get this done using a native textbox as the search box and it changes the query for a sqlite database.  Works great in Android.

If anyone needs the code, let me know.

hei i need the code bro can u post it in the forum for me to see i will be very grateful for your reply

hoochongyi95,

Here is my code.  I haven’t polished it up yet and it has alot of our formatting in it, but it does work well.  It pulls from a sqlite database and as the user types in the native text field, it narrows down the results.  Tested on an Android device and works great - pops up the keyboard and everything.

--------------------------------------------------------------------------------- -- SCENE NAME -- Scene notes go here --------------------------------------------------------------------------------- require "sqlite3" local globals = require( "globals" ) local storyboard = require( "storyboard" ) local scene = storyboard.newScene() local widget = require( "widget" ) local ALSBLS = "ALS" local ShowingDoc = false local webView local SearchText = "" local OldSearchText = "" -- Clear previous scene storyboard.removeAll() local SearchTextArea local tapnum = 0 -- local forward references should go here -- --------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view -- Background color local bgImage = display.newRect( 0, 0, 380, 570 ) bgImage.strokeWidth = 0 bgImage:setFillColor( 0/255, 84/255, 166/255 ) bgImage:setStrokeColor( 0/255, 84/255, 166/255 ) bgImage.x = display.contentCenterX bgImage.y = display.contentCenterY group:insert(bgImage) -- Header 360 x 50 local bgHeader = display.newRect( 0, 0, 360, 50 ) bgHeader.strokeWidth = 0 bgHeader:setFillColor( 237/255, 237/255, 237/255 ) bgHeader:setStrokeColor( 237/255, 237/255, 237/255 ) bgHeader.x = display.contentCenterX bgHeader.y = 25 group:insert(bgHeader) local topText = display.newText( "Drugs", 20, 0, native.systemFontBold, 20 ) topText:setFillColor( 0 ) topText.y = 25 topText.x = display.contentCenterX group:insert(topText) -- back button local backBtn = display.newImage( "back.png" ) backBtn.x = 25 backBtn.y = 25 group:insert( backBtn) -- top Phone button local imgPhone = display.newImage( "callmain.png" ) imgPhone.x = display.contentWidth - 50 imgPhone.y = 25 imgPhone:addEventListener( "tap", function( event ) system.openURL( "tel:610-402-1473" ) end ) group:insert(imgPhone) local SearchTextArea local SearchBar = display.newImageRect( "SearchBar.png", 320, 40 ) SearchBar.anchorX = 0 SearchBar.anchorY = 0 SearchBar.x = 0 SearchBar.y = 51 group:insert(SearchBar) --local clck = display.newRect( 0, 0, 30, 30 ) --clck:setFillColor(1,1,1) --clck.anchorX = 0 --clck.anchorY = 0 --clck.x = 300 --clck.y = 51 --group:insert(clck) -- -- -- local navBarHeight = 50 local tabBarHeight = 0 -- data local myDataD = {} --local myData = {}; local int = 1 local doneDB = false local path = system.pathForFile("EMS\_DB.sqlite", system.DocumentsDirectory ) file = io.open( path, "r" ) if( file == nil )then -- Doesn't Already Exist, So Copy it In From Resource Directory pathSource = system.pathForFile( "EMS\_DB.sqlite", system.ResourceDirectory ) fileSource = io.open( pathSource, "rb" ) contentsSource = fileSource:read( "\*a" ) --Write Destination File in Documents Directory pathDest = system.pathForFile( "EMS\_DB.sqlite", system.DocumentsDirectory ) fileDest = io.open( pathDest, "wb" ) fileDest:write( contentsSource ) -- Done io.close( fileSource ) io.close( fileDest ) end -- handle the applicationExit event to close the db local function onSystemEvent( event ) if( event.type == "applicationExit" and doneDB==false) then db:close() end end local function reLoadData() print ("reLoadData") int = 1 myDataD = {} doneDB = false local mySQL if string.len(SearchText) \> 0 then mySQL = "SELECT DrugName from Drug\_Master WHERE DrugName LIKE '"..SearchText.."%' Order By DrugName" else mySQL = "SELECT DrugName from Drug\_Master Order By DrugName" end print(mySQL) --Go through my database selecting all the site names... local dbPath = system.pathForFile("EMS\_DB.sqlite", system.ResourceDirectory) local db = sqlite3.open( dbPath) for row in db:nrows(mySQL) do myDataD[int]={} myDataD[int].name = row.DrugName int = int+1 end db:close() doneDB = true print(int) end reLoadData() local springStart = 0 local needToReload = false -- ------------------------------------------------------------------------ -- -- ------------------------------------------------------------------------ local function scrollListener( event ) local buffer = 50 local phase = event.phase local row = event.target local params = event.target.params if event.phase == "began" and not row.selected then startXpos = event.x startYpos = event.y row.selected = true elseif phase == "ended" or phase == "moved" then row.selected = false if phase == "ended" and event.y \< startYpos + buffer and event.y \> startYpos - buffer and event.x \< startXpos + buffer and event.x \> startXpos - buffer then --native.showAlert("Row " .. row.index, "Selected") if params == nil then print("category") else --print ("Row " .. params.sub .. " Selected " .. params.name) ShowingDoc = true local \_H = 480 local \_W = 320 local SBH = 50 --local doc = string.upper(params.name) local doc = params.name --doc = string.gsub(doc , "%s$", "") doc = "HTML/Drugs/"..doc..".html" print("-") print ("-\> "..doc) SearchTextArea.isVisible = false webView = native.newWebView( 0, SBH, \_W, \_H-SBH ) webView.anchorX = 0 webView.anchorY = 0 webView:request( doc, system.ResourceDirectory) end end end return true end -------------------------------------------------------------------------------------- --ON ROW TOUCH -------------------------------------------------------------------------------------- local function onRowTouch(event) return true end -------------------------------------------------------------------------------------- local function onRowRender( event ) --Set up the localized variables to be passed via the event table local row = event.row local id = row.index local params = event.row.params local idx if ( event.row.params ) then idx = params.idx --row.bg = display.newRect( 0, 0, display.contentWidth, 55 ) row.bg = display.newImageRect( "Hospitalcell.png", display.contentWidth, 55 ) row.bg.anchorX = 0 row.bg.anchorY = 0 --row.bg:setFillColor( 0/255, 84/255, 166/255 ) --row.bg:setStrokeColor( 0/255, 84/255, 166/255 ) row:insert( row.bg ) --row.imgArrow = display.newImageRect( "sidearrow.png", display.contentWidth, 55 ) --row.imgArrow.anchorX = 0 --row.imgArrow.anchorY = 0 --row.imgArrow.x = display.contentWidth - 20 --row.imgArrow.y = 10 row.nameText = display.newText( params.name, 16, 0, native.systemFontBold, 20 ) row.nameText.anchorX = 0 row.nameText.anchorY = 0 row.nameText:setFillColor( 1 ) row.nameText.y = 18 row.nameText.x = 10 row:insert( row.nameText ) row.imgArrow = display.newImageRect( "sidearrow.png", 12, 20 ) row.imgArrow.anchorX = 0 row.imgArrow.anchorY = 0 row.imgArrow.x = display.contentWidth - 20 row.imgArrow.y = 18 row:insert(row.imgArrow) end return true end local myListD = widget.newTableView { top = navBarHeight + 40, width = display.contentWidth, height = display.contentHeight - navBarHeight - tabBarHeight, backgroundColor = {0/255, 82/255, 154/255 }, onRowRender = onRowRender, onRowTouch = onRowTouch, listener = scrollListener } ---------------------------------------------------------- -- Load table function ---------------------------------------------------------- local function loadTableD() --myListD:deleteAllRows() local currentCat = "none" for i = 1, #myDataD do myListD:insertRow{ rowHeight = 55, isCategory = false, rowColor = {0/255, 84/255, 166/255 }, lineColor = { 0/255, 70/255, 130/255 }, params = { name = myDataD[i].name, isCat = false } } end end local function DisplayResults() -- Search text changed -- Get the new data reLoadData() -- Delete rows Reload the table myListD:deleteAllRows() loadTableD() -- Set oldsearch to current search so we can know when it changes OldSearchText = SearchText end --------------------------------------------------------- -- Load Table --------------------------------------------------------- loadTableD() group:insert( myListD ) group.x = display.contentCenterX group.y = display.contentCenterY ------------------------------------------------------ -- -- BACK BUTTON -- ------------------------------------------------------ backBtn:addEventListener( "tap", function( event ) -- Check to see if we're showing a document if (ShowingDoc == false) then -- not showing a document so go to menu SearchTextArea:removeSelf() SearchTextArea = nil storyboard.gotoScene( "scene\_menu" ) else -- showing a document so kill it webView:removeSelf() webView = nil ShowingDoc = false SearchTextArea.isVisible = true end end ) local function SearchTextAreaListener( event ) if ( event.phase == "began" ) then -- user begins editing text field print( event.text ) elseif ( event.phase == "ended" or event.phase == "submitted" ) then -- text field loses focus -- do something with defaultField's text print( "Submitted text: " .. event.target.text ) elseif ( event.phase == "editing" ) then print( event.newCharacters ) print( event.oldText ) print( event.startPosition ) print( event.text ) SearchText = event.text -- See if it changed if (SearchText ~= OldSearchText) then DisplayResults() end end end -- Create text field SearchTextArea = native.newTextField( 45, 55,220, 36 ) SearchTextArea.anchorX = 0 SearchTextArea.anchorY = 0 SearchTextArea.hasBackground = false SearchTextArea:setTextColor( 1,1,1 ) SearchTextArea:addEventListener( "userInput", SearchTextAreaListener ) --clck:addEventListener( "tap", function( event ) -- Check to see if we're showing a document -- if tapnum == 0 then -- SearchText = "a" -- end -- if tapnum == 1 then -- SearchText = "s" -- end -- if tapnum == 2 then -- SearchText = "" -- end -- tapnum = tapnum + 1 -- if tapnum \>2 then -- tapnum = 0 -- end -- See if it changed -- if (SearchText ~= OldSearchText) then -- DisplayResults() -- end -- end) end -- Called BEFORE scene has moved onscreen: function scene:willEnterScene( event ) local group = self.view end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view end -- Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view end -- Called AFTER scene has finished moving offscreen: function scene:didExitScene( event ) local group = self.view end -- Called prior to the removal of scene's "view" (display view) function scene:destroyScene( event ) local group = self.view end -- Called if/when overlay scene is displayed via storyboard.showOverlay() function scene:overlayBegan( event ) local group = self.view local overlay\_name = event.sceneName -- name of the overlay scene end -- Called if/when overlay scene is hidden/removed via storyboard.hideOverlay() function scene:overlayEnded( event ) local group = self.view local overlay\_name = event.sceneName -- name of the overlay scene end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "willEnterScene" event is dispatched before scene transition begins scene:addEventListener( "willEnterScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "didExitScene" event is dispatched after scene has finished transitioning out scene:addEventListener( "didExitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) -- "overlayBegan" event is dispatched when an overlay scene is shown scene:addEventListener( "overlayBegan", scene ) -- "overlayEnded" event is dispatched when an overlay scene is hidden/removed scene:addEventListener( "overlayEnded", scene ) --------------------------------------------------------------------------------- return scene

can u send me the full source code because your code seems to be missing something like the image.png file i dont have

Has this been updated recently?  Where is the best place to get the full code?

I tried this on Android and I can’t test it in the Simulator because it can’t do the keyboard pop-up, but in the simulator I can click and get the text area but no way of typing in it.

When I build for Android, when I click to get the text area… it blows up the app.

Has anyone gotten this to work on Android?

Can I have the .png files other than the shadow and rowarrow which I have found in the interface corona. The others such as the searchBar, searchBarEditing and resetSearch png files? I cannot run it because of those png src files. 

searchBar, searchBarEditing and resetSearch png files are attached to the first post in the thread. Don’t know if this code is still working with the current versions of Corona SDK. Its been a while since this was posted. All the best.

Thanks for the reply.  I actually managed to get this done using a native textbox as the search box and it changes the query for a sqlite database.  Works great in Android.

If anyone needs the code, let me know.